How to avoid using 2 modules for desktop and mobile

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

  • 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
  • I need  full width expect desktop and tablet though...  not full width expect mobile.
    Whats and option for that?
  • 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
  • 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;
    }
    }
  • 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
  • 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
  • Surely, I'll talk about it with the dev team.
    If you have some other questions, feel free to ask ;)

    Thanks
  • Cool, that would be awesome. Thanks for considering
Sign In or Register to comment.