Home Forums Archived Forums Mobile View How do I center stacked header widgets on mobile view? Re: How do I center stacked header widgets on mobile view?

#20751
scrambler
Moderator

That is because you kept the centering rule I gave you for your old system. If you use my second suggestion, do not use the @media rule for the centering and bullets.

So remove these two rules
@media only screen and (max-width:500px) {
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2 {width:100%;}
}   /*Change the 500px threshold to what you want or the sum of both min-width above (in this case 300+200)*/

@media only screen and (max-width:640px) {
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2, #sidebar_header .header-widget-3 {width:100%;text-align:center;}
#sidebar_header .header-widget-1 ul {list-style:none;}
}

Instead only use

@media only screen and (max-width:640px) {
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2 {margin-left:3%;margin-right:3%;width:42%;}
}