- This topic has 5 replies, 2 voices, and was last updated 9 years, 1 month ago by
.
-
Posts
-
Hi Tom,
I have a few design questions and I am not sure how to solve them. For some I have a solution, e.g. container gap, footer gab, but it is not really working. Therefore looking forward for your valuable hints:
1. Is there a way to totally remove container spacer? On my page http://www.bullenbrief.de/rubrik/wochenrueckblick/ there you can e.g. see in the right sidebar above “Letzte Beiträge” an line. When I change the layout under container I can modify this behavior. But when I change the gab between containers to “0” there is a gap of about 10. Best solution is to set it to 1 and that’s what I have done, but there you can still see a small gab. So I am looking for a solution to set the gap to “0”.
2. Using the mobile version of http://www.bullenbrief.de/rubrik/wochenrueckblick/ there is the mobile menu completely on the left side. How can I add a space of 10 px?
3. The menu-link of a mobile version of http://www.bullenbrief.de/rubrik/wochenrueckblick/ is on the left but during scrolling down it is moving to the right side. Is there a way to change that?
4. The footer under “Quicklinks” is completely on the left edge. When I change the footer gap in the customizer it looks good but after saving there is no gap anymare.
5. What is the width of the main navigation until the mobile “menu navigation” is showing? I do not like that at some point for smaller screens the menu is divided into two lines. I would prefer that it automatically changes to the mobile menu at this size.
6. At the mobile version of http://www.mietwagen-broker.de/ the search and menu are overlapping. How can I configure that correct?
Many Thanks again for your support!
JuergenLead Developer
Hi there,
1. Good find! This is a bug I just fixed. However, for the separating space if you don’t want any spacing, simply set the content layout to “One Container”.
2. Removing this line from your child theme will fix this (plus a lot of other stuff):
@import url('../generatepress/style.css');3. It moves to the right because you have a logo display. You can move it to the left with this CSS:
.sticky-menu-logo .navigation-stick:not(.mobile-header-navigation) .menu-toggle { float: left; }4. Fixing the issue in #2 will fix this.
5. The mobile menu initiates at 768px. You can adjust it using these instructions: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width
6. Making the same change in #2 should fix this.
Hope this helps! 🙂
Hi Tom,
thanks for the quick answer. I will work on your recommendations.
Sounds good 🙂
Hi Tom,
your recommendations work perfect. Thank you so much.
By the way: Do you have a recommendation how to optimize woocommerce product overview and product single pages?
I used more or less the standard. Mobile version at http://www.bullenbrief.de/bullenshop/die-100-wichtigsten-antworten-zur-finanzkrise/ does not look so good. It would be better the title and other text to appear next to the product image or a higher size of product image. Something like that: http://www.buecher.de/shop/fachbuecher/so-funktioniert-die-boerse/scherbaum-christoph-a-/products_products/detail/prod_id/42026358/
And the overview with more products looks ugly because the height is different for all and on mobile version the images are much to big compared to the rest: http://www.bullenbrief.de/produkt-kategorie/buecher/ I would like to have a solution like http://www.buecher.de/ni/search_search/quick_search/q/cXVlcnk9YiVDMyVCNnJzZSZyZXN1bHRzPTE1JmNvbnRlbnRUb1NlYXJjaD1wcm9kdWN0cyZmaWx0ZXJzaG9wPXMlMjFidSZwYWdlPTEmZmlsdGVyYXJ0aWtlbHR5cD1hJTIxc3c=/
Do you have a quick answer or is there something special you recommend for Woocommerce in addition to GeneratePress?
Many Thanks,
JuergenYou’re actually overwriting most of the WooCommerce mobile CSS by adding stuff like this to your child theme:
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {width:26%} .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {width:60%} .woocommerce #content div.product div.related, .woocommerce div.product div.related, .woocommerce-page #content div.product div.related, .woocommerce-page div.product div.related {width:70%} .woocommerce ul.products li.product a img { width: 70%; }If you want to adjust that stuff, put it in a media query that only applies to desktop:
@media (min-width: 769px) { .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {width:26%} .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {width:60%} .woocommerce #content div.product div.related, .woocommerce div.product div.related, .woocommerce-page #content div.product div.related, .woocommerce-page div.product div.related {width:70%} .woocommerce ul.products li.product a img { width: 70%; } }Having them in two columns on mobile isn’t a great idea, as things get super squished and the usability suffers. One big row is perfect on mobile.
- You must be logged in to reply to this topic.
