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.