Support Center Visit Demo License manager Buy @ envato

How to avoid using 2 modules for desktop and mobile

scott74scott74
in BeBuilder
I would like to target a module and use media quiries to make it full width on mobile and regular width on desktop instead of using two separate modules with duplicate content for the devices.

Can you help me with the CSS to target these containers. Can't seem to get it..



The section I would like to do this on is the big plate of food background on the middle of page on this site.. Right now I have it duplicated for mobile so can be full width using the module hide settings.

Thanks Scott

Comments

  • PabloPablo
    Hello,
    You have a special "Full Width Except Mobile" option in the section settings:

    Sorry about the screenshot, it's a bug from WP 5.4 with Betheme - it's getting patched with new update.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • scott74scott74
    I need  full width expect desktop and tablet though...  not full width expect mobile.
    Whats and option for that?
  • PabloPablo
    Sadly, we do not have this kind of functionality - in this case, two modules will be the best.

    If you would like to easily catch whole section, just provide the ID name in the section settings, you will find it on the bottom of these settings:

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • scott74scott74
    ok .. so are yo saying there is not a way to do it with CSS/ I have my section an ID but could not figure out how to target it exactly for full width...

    I know the media queries I need to use but don't think you can just give the section and ID and use

    /*MOBILE SIGN UP FORM */
    @media (max-width: 767px){
    .mobile-form-container{
    width: 100% !important;
    }
    }
  • PabloPablo
    It is possible, but it requires overwriting a lot of div's css parameters which are inside the section (and wrap) to make it look that good as using two modules.

    We suggest to use two modules instead or create some kind of JS script which will be removing or adding certain section inside the website - but we do not help with it, we only create minor css tweaks.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • scott74scott74
    Ok thanks..maybe a future update will allow a tick bock for that.
    Kind of like you have full width Desktop only but have tick box for Full width mobile only?

    Thanks
  • PabloPablo
    Surely, I'll talk about it with the dev team.
    If you have some other questions, feel free to ask ;)

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • scott74scott74
    Cool, that would be awesome. Thanks for considering
Sign In or Register to comment.