How do I center stacked header widgets on mobile view?

[KatrineBB]

Hi,

Please take a look at this page:

http://www.body-mindness.dk/

I have managed to stack the header widgets – just need help to figure out how to center them on mobile view?

Thanks in advance 🙂

BR Katrine

[scrambler]

if you just want to center them all on mobile, you can add the rule below in Advanced Options > Head Section > Custom CSS rule box.

@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;}
}

and you would want to remove the bullets on the top one by changing that to:

@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;}
}

But what you have right now is not great, because they only stack when the total width is above 100%, so first the 3rd one stacks which makes it a very small item on its own line, then the middel (large) one stacks which kicks the 3rd one to the right again, then they all stack, and you have the firts and thye third that are very sall items alone on their own line.

I would think that ideally, on mobile, you would want the first and 3rd on the same line, and the middle one under that.

If you want to do that, you would do the following.

Place the widgets in the Header Widget area in the following order: Choose language, Newsletter, Longlogo body-..

In the header horizontal widget area widgets give them the following width  15%, nothing, nothing

Then in Advanced Options > HEad Section > Custom CSS rule box you would put the following rules

#sidebar_header .header-widget-2 {float:right;}  /*this put the news letter on the right initially*/

It may need some tweaking, and we could do that once in place

[KatrineBB]

Thank you so far 🙂 This was great.

I need help for the tweaking I think. The newsletter jumps to a second line.

[scrambler]

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%;}
}

[Author]

Posts