Subheader padding on mobile?

Comments

• Pablo

  September 2019

  Hello,

  You cannot provide the padding for subheader on mobile only, it can be done only globally.

  So, if you want to make it bigger, try to use the "%" value, not static pixels.

  
  

  Of course, you can use the Custom CSS too, but as I see, there is something wrong with your code.

  Probably, the !important rule has bigger order value.
  

  Thanks
  

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

  September 2019 edited September 2019

  It seems to take affect on desktop but not mobile is what I a seeing and looks like the responsive css theme file is overriding it but When I try to update the reponsive file it still does not take affect.

  
  

  That's what I cannot figure out. Whatever i set in the theme subheader area takes affect on desktop but not mobile ... trying to get them both the same but when you drag the window you can see it switch to the hard coded stying of the respnsive css file

  
  

  See here

  https://www.loom.com/share/de9d4269c9844e7db3688378977e6343
  
• Pablo

  September 2019

  Okay, I understand now.

  Please, attach this CSS code, it will overwrite all of the CSS settings (including the responsive.css)

  html body.minimalist-header-no #Subheader{
  	padding:50px 0 !important;
  }

  Thanks

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

  September 2019

  There it is .. Thank you very much...    needed the html body  in front of it i guess
• scott74

  September 2019

  Ps... is there a global way to control the padding on containers that you set..   On desktop I can  get the spacing looking good but on mobile that same spacing between containers looks excessive so looking for a global way to reduce the padding in half maybe on mobile.

  
  

  only way I could think of would be to duplicate each container and set the padding differently and set to display on mobile only for those and the desktop padding to display on desktop only but that didnt seem the most efficient way of doing so
• Pablo

  September 2019

  If you would like to change the container on the mobile only, you have to use the @media queries.

  https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

  Of course, use the same code I sent above for mobile.

  
  

  There is no option to duplicate the subheader, that's just not possible with the options which theme provides.

  You would have to edit theme and wordpress files to achieve that.

  
  

  All possible changes for mobile are in the Theme Options > Responsive
  

  Thanks
  

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

  September 2019

  ok.. so maybe best options would be to give each container a class and then adjust padding for top and bottom between those containers with media quiries for mobile only ... Would that be the most efficient?

  
  

  Thanks again. 
• Pablo

  September 2019

  There is no possibility to add custom class in the subheader through the theme options.

  You would have to use some JS script to append the class into the subheader.

  
  

  Thanks
  

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

  September 2019

  Thanks.. was referring to all the modules on the body of the page though so that padding between all the sections was little less than on desktop..

  
  

  Thanks you.
• Pablo

  September 2019

  Yes, that's possible with the Muffin Builder.

  Every wrap/section/item has an option to apply the class, so you will be able to catch it with CSS code.

  You'll find it on the bottom of the settings of that element.

  http://prntscr.com/p2j9rb

  
  

  If you have some more questions, feel free to ask.

  Thanks
  

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