Support Center Visit Demo License manager Buy @ envato

Full width (image, Google Map) not possible

david7722david7722
edited July 2022 in Files & images

Hi there,

I am probably missing something (as I cannot find any discussion on this topic), but since the update to v26, all of my websites built on BETHEME are "suffering" from extra margin around images or Google Maps –they are placed in sections that are set to full width and they were true full-width before the update.

Now since the version 26 I am not able to stretch any of these sections to full width, although they are set to full width. ?‍♂️ Setting "spacing" for the element to 0px does not help neither.

I can see that it is related to the CSS of .mcb-column-inner that has default margins set through variables (defaults are 12px left and right). I CANNOT figure out the way how to overwrite these to achieve TRUE full width without that margin.

Can you please let me in on that little secret how to do full width, please? The websites where I used full-width don't look pretty. Besides that, the full-width pictures or maps are essential to a full-width designs.

Please let me know what I am doing wrong. Thank you.

Comments

  • david7722david7722

    Hello again,

    I found out that I need to overwrite CSS variables [--mfn-column-gap-left: 0px;] for a specific element to achieve 0px border of .mcb-column-inner... although your CSS editor does not like this definition (it gives error red cross at the beginning of the CSS line).

    This is a "temporary" fix to me to be honest. How do you set a section with image or map to be full width without those 12px margins on the left/right?

  • PhilPhil

    Hi,

    Please, open the Map options, go to Advanced -> Spacing, and set the margin to zero.

    image.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • david7722david7722

    I was trying to set SPACING to 0 on the wrap (a level above the element = picture/map) and that did not work and got me confused. Did not realise the element itself has this setting.

    Thank you for your help.

  • PhilPhil

    But you handle it, right?

    Is there anything else I can help you with?


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • david7722david7722

    Yes, I managed to set 0 margin and get full width for desktop.

    I still do not know how to achieve full width for mobile though. Can you please advise on that? Thank you!

    Regards,

    David

  • PhilPhil

    Please, check if you do not have the enabled option Full width | except mobile.

    image.png

    The Full-width option should be enabled in the Advanced tab of the section options.

    image.png

    Please also check if you have the newest version of the Betheme. There was an issue with the mobile Full width which was fixed in the recent updates.


    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • david7722david7722

    Hi Phil,

    Thanks so much for patience and explaining this to me! I did not realise this has changed (the full width settings) and moved to a different place... I was still trying to set it up the "old" way as I am not using the BeBuilder, so I missed the point ?‍♂️.

    I have probably missed some documentation about the changes in v26, so sorry for taking your time on this.

    Thanks again. All sorted now. Full width achieved ?

    Regards,

  • PhilPhil

    You are welcome.

    Glad I could help you with that. If you have any other questions or problems, feel free to ask.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Neccessary

Necessary cookies help make a website usable by enabling basic functions like page navigation and access to secure areas of the website. The website cannot function properly without these cookies.

Analytics & Performance

Statistic cookies help website owners to understand how visitors interact with websites by collecting and reporting information anonymously.

Marketing

Marketing cookies are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.