Help with Mobile logo alignment & size recommendations
Hi,
I hope you are doing well, I would like to ask you about logo dimensions to ensure responsivity.
1) How can I center my logo within the mobile viewport in bebuilder? Right now, it seems slightly off.
2) I'm currently using : an svg for desktop/laptop/tablet, and a separate one for mobile. Could you enlighten me about correct sizes to ensure these display properly and scale correctly across all devices?
Thank you so much for your time and support!
Kind regards
Comments
Hi,
1) These two wraps on the sides should have equal width e.g. 25%:
Then the wrap in the middle will expand to the remaining space, and the logo will be centered.
2) Sizes depend on your goal, and there is no universal value for all. You must test which works best for your website.
Best regards
1)Do you mean I have to change the width of the two side wraps to custom instead of default ? I would like to let you know that I don't see no minus or plus button on mobile view when hovering on the wraps, can you enlighten me on how to do it ?
2) Understood, I see what you're saying. Appreciate it
Thank you
Kind regards
Yes, I mean changing the width of these wraps to custom ones.
1) I think it's solved, I have set the same custom width for those two wraps. Let me know if this is a correct method. Thank you!
2) I would like my sticky header to be be visible on mobile as well, as you can see on the following 2nd screenshot I'm currently on the sticky header view, but I cant see my default mobile header nor the ability to create a new mobile header section and copy the original one.
Also when working on mobile view port, the mobile header view replaces the default view right ? Do I have to switch only between mobile and sticky windows for a smooth workflow?
3) Regarding my mobile footer: how can I align my footer elements? One on the left and the other on the right making sure they're well aligned with the header
4) My shop page looks cropped when I access the site vie mobile phone, here's a screen for a clear vision over. Could you identify the issue causing this?
Thank you so much!
Appreciate your help on this
Kind regards.
1) You set 50px for both, but it is too small for the one on the right.
Instead I suggest using % not px, and set a value so all elements fit nicely in the wrap.
2) The mobile header does not have an option to build a sticky header.
You can set it to be Fixed and use Scroll visibility option for the section
3) Please check the following video tutorial:
https://support.muffingroup.com/video-tutorials/flexbox-positioning-with-bebuilder/
4) I do not see that.
Are there any steps to reproduce this problem?
Best regards
1) I’ve set both side wraps to 20% instead of 50px. Do you think this could work? Also, could you explain when it's better to use px and when to use %? As you can see the left wrap looks good but the right one seems a bit off (the one containing the cart), your suggestions are very welcome.
2) Yes indeed, it is set as you told me, which made it fixed on the top but once someone scrolls down it stays fixed and doesn't hide on scroll. Is there a way I can achieve the same sticky effect on mobile?
3) Yes, I did. But what I’d like to point out is that even when I choose a Flexbox position for the section footer, it often doesn’t change anything. I believe it has something to do with the width of the wraps if I'm not wrong, which makes things even more complicated. Both the wrap and section elements have this option, which makes it a bit tricky and confusing. I’m having trouble positioning elements correctly.
4) Yes, you can follow these steps: 1.Dashboard 2. Click on Visit site (site preview not shop). Is it because I have set my shop page as the front page ?
Thank you so much
Kind regards
1) The px should be used when you are sure that you want to have the same size no matter the browser width. Mobile view starts below 767px width, so it is better to use % so it will automatically adjust to the device.
If all elements fit in 20% without going outside the wrap, then this value is okay.
2) It seems that there is a bug. We must correct that.
3) Sometimes elements like payment methods or column text have their own positioning in the style tab. Did you adjust it as well?
4) Your header overlaps the images:
Edit shop template and add some top padding top the content on mobile:
Best regards
PS. Why do you put nested wraps everywhere? Layout on your website does not need it in most or not all places, an it adds additional nesting level, and should be used only when layout requires that.
1) I will make sure this is noted. Can you show me how can I push my cart icon a bit to the canva? (the screenshot in number 4 highlights the cart icon position for a good view)
2) No worries, I understand. Please let me know when it's fixed. Appreciate it!
3) I have watched the video again, its been quite helpful. Though can you tell me how can I add those solid gray lines dividing the bottom content just like how it's shown on this screenshot?
4) I followed your instructions adding the top padding to the section, but the issue is still present:
Your remark is accurate. I've actually been wondering when it's necessary to double the wraps. Even when I increase the site layout, I think my page elements still seem smaller compared to when I will remove the nested wraps, but I'm not entirely sure. Though I agree with you that they might not be needed. Could you show me how to delete them?
Thank you so much!
Kind regards
1) Sorry but I quite do not understand. Do you mean that you want to move it a bit from the side?
If yes, you can add some right margin to it:
2) We are working on it now.
3) You can add a top border to the section:
4) Sorry, my bad. I meant that you should add it to the home page:
5) Grab your element from the nested wrap and move it to the regular wrap (you will see gray bar):
Then, when the element is outside the nested wrap, you can delete it:
It might be easier to accomplish this with the navigator:
Best regards
2) We have corrected it.
Please check it out.
Best regards
1) Yes, that’s exactly what I was looking for! So, whenever an element is misplaced, I just need to add spacing to the side that needs adjustment, correct? And are all spacing values automatically inherited across all device viewports?
2) Perfect! Appreciate it
3) Done, helped a lot!
4) All good, I've managed to fix it following your instructions.
5) I clearly see what you've explained and I have removed the remaining nested wrap. Thank you!
6) Is there a way to add some space beneath my single product image (screen 1)?
in order to create a space between the thumbnails and the main product image, similar to what’s shown in the second reference screenshot:
Is it related to the image settings?
7)The product images are not displaying on my cart page when I switch to mobile view. Also, is there a way to hide the coupon code element and make the PayPal call-to-action button appear, similar to what’s shown in the reference example? I’ve attached two screenshots to help illustrate the issue.
Regarding the cart totals part. I really would like to remove the subtotal line, I guess it has something to do with the coupon code if I'm not mistaken. But since it will be causing a bit of confusion I rather prefer to delete or hide it instead.
Reference example:
My actual cart page on mobile:
Thank you in advance!
Let me know if anything’s unclear, I’ll gladly explain more.
Appreciate your support.
Kind regards
1) Yes that is right. I recommend seeing the following video tutorial about inheriting:
https://support.muffingroup.com/video-tutorials/boost-your-bebuilder-workflow-inherited-styles-placeholders-explained/
6) You can add space to it in Betheme -> Theme options -> Shop -> Single product: Main image margin.
7) Product image is hidden on mobile by WooCommerce on purpose. You can show it back with the following CSS code:
.woocommerce-page table.cart .product-thumbnail{ display: block!important; text-align: left!important; } .woocommerce-page table.cart .product-thumbnail:before{ display: none; }Anyway, there is not much you can do with its position on mobile, and this is more or less the best display you can achieve.
To hide the coupon field on mobile, use this CSS:
@media only screen and (max-width:767px){ .woocommerce-cart .coupon{ display: none!important; } }But about PayPal CTA, you should contact the plugin author.
Best regards
1) Sure, I watched it and it's a life saver! Thank you!
6) I have added 30px in the main image margin. Here's how it's displayed, as you can see nothing changed that much
7)
I see what you're saying, done! Thank you! And yes I agree with you regarding the CTA.
I will contact the plugin author in case.
For the subtotal: I have inserted the following CSS rule, please let me know if this won't cause any distortion or issues afterwards:
.cart-subtotal {
display: none !important;
}
Also I would like to let you know that I want to hide the coupon code across all devices. Could you show me how?
I truly appreciate your tips, they've been a big help.
Thank you,
Kind regards
I have replaced the css you gave me with this one:
.woocommerce-cart .coupon {
display: none !important;
}
Let me know if this is also correct
Regarding the Subtotal, I want it displayed only on the checkout page, not on the cart page. Do you have any clues on how can I achieve this?
Thank you so much!
Kind regards
8) I'm currently experiencing a layout issue on the same cart page. Specifically, the column headers (Price, Quantity, Subtotal) don't appear to be properly aligned with their corresponding values in the table rows.
I'd appreciate your guidance on this as well.
Thanks!