Subheader padding on mobile?

Can't seem to get the padding set for subheader to take effect on the actual phone device

site

Comments

  • 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
  • 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
  • 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
  • There it is .. Thank you very much...    needed the html body  in front of it i guess :)
  • 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
  • If you would like to change the container on the mobile only, you have to use the @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
  • 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. 
  • 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
  • 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.
  • 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.

    If you have some more questions, feel free to ask.
    Thanks
Sign In or Register to comment.