Docs

[wiser308]

My website is http://www.wiserpolicy.org. My pages don’t show correctly on a cell phone. I have indented margins left and right. Can someone tell me how to get the pages to show correctly on a mobile device?

[Rupok]

Hi there,

It seems you have set 200px margin for the section that’s causing the issue. You should not use such a large margin. However to reset this for mobile, you can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 767px) {
.x-section {
  margin: 0 auto !important;
}
}

Thanks!

[wiser308]

This reply has been marked as private.

[Christopher]

Hi there,

Please remove left and right margin from Section #3 and add following code in customizer -> global CSS:

@media (min-width:979px){

.home #x-section-3{
margin: 0px 200px;
}
}

Hope it helps.

[wiser308]

This reply has been marked as private.

[Friech]

Hi Rhonda,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind please provide us with a little more clarification.

Which of the section/content of your page that you’re having the issue?
Please clarify how do you want this section/content to look on desktop and how it should look on mobile.
Perhaps provide us some design mock-up.

We’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[wiser308]

This reply has been marked as private.

[Joao]

Hi There,

Please instead of using px like 200px use % like 10% or a different value according to your wishes.

Let us know how it goes,

Joao

[wiser308]

This reply has been marked as private.

[Friech]

Hi There,

So you want that About WISER section to be indented on desktop and mobile devices?

Is this the code you’re referring to, yes?

@media (min-width:979px){

.home #x-section-3{
margin: 0px 200px;
}
}

Please update that to:

@media (min-width:979px){
.home #x-section-3{
margin: 0px 200px !important;
}
}

That code will not applied on small devices because if we do, it will look like this:

So maybe lets not use a huge margin, lets just set the container width. Please use this code instead.

.home #x-section-3 .x-container.width{
		width: 50%;
}

Please adjust the 50% value where you see it fits.

Hope it helps, cheers!

[wiser308]

I used the x-container.width{
width: 75%;
}

which applied this to all pages! woo! woo!

Thanks!

[Rad]

Glad it works, and thanks for sharing 🙂

[Author]

Posts