Mobile content padding for category pages, blog and pages

[KimAnn]

Hello. Using this forum I was able to remove the extreme padding from single posts on mobile view successfully using this CSS:

@media screen and (max-width: 767px) {
    .single-post .x-container.width {
      width: 100% !important;
    }
    .single-post .x-container-offset {
      margin:5% !important;
    }
}

How can I accomplish the same thing on: Pages, category archives, and blog? I basically want there to be less padding on mobile view for all the native content (all content that is native to wordpress and X NOT in cornerstone) but I don’t want it to affect the padding of the header, footer and nav bar. It seems that even with the code above the nav bar will lose padding when on a single post.

Conversly if I use this CSS it accomplishes all that I want, EXCEPT I lose padding on the mobile nav bar, sidebar and widgets

/* mobile*/
@media screen and (max-width: 767px) {
.x-container.width {
width: 100% !important;
}
.x-container-offset {
margin:5% !important;
}
}

[tristup]

Hi @KimAnn,

Thanks for reaching out.
Regretfully, giving support on the custom CSS code is beyond the scope of theme support. I would suggest you hire a developer who can assist you on this or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[KimAnn]

This is not custom CSS this is CSS i got off of YOUR forum. Also, it is X theme specific. DId you read the query?

I need to reduce the excessive spacing on mobile view around content. Please advise. I waited all night for this response. Disappointing.

Here is the original post:

Need help with css for mobile (remove post and page padding)

I’ve tried to alter the padding, margins, font size, etc. for mobile display to make my site look better on the smaller screens. Yet I must be messing up the css code because it’s not shifting the display of anything on mobile. Can you please review and give me updated/correct css code? Thank you so much! @media screen and (max-width:440px){ .post-template-default .single-post .x-container.width { width: 100%!important;} .post-template-default .single-post .x-container-offset { …

[KimAnn]

Nevermind. I found the full solution here on the forum:

Remove Border on Mobile Post?

Hi There, Thank you for the clarification, please remove all the previous CSS code given and add this instead. @media (max-width: 767px) { .single-post .entry-wrap { border-radius: 0; border-width: 0; box-shadow: none; padding: 36px 0 0 0; } } Keep in mind that when you say mobile, we assume that is screen-width 767px and below. Hope it helps, Cheers!

Using this code specifically:

@media (max-width: 767px) {
	.entry-wrap {
		border-radius: 0;
		border-width: 0;
		box-shadow: none;
		padding: 36px 0 0 0;
	}
}

[tristup]

Hi @KimAnn,

Glad that it resolve now.

Thanks