Remove Border on Mobile Post?

Support
#1

Hi All,

How do I remove the container around mobile blog posts and make them lay out like pages on Integrity? The container takes up a lot of space I need for image and text width instead of decoration. I turned on the Settings > X Settings > Fullwidth Post Layout, but the container is still there. I used all of the previous suggestions I could find in Theme > Options > CSS, but only managed to wreck the layout.

Thanks.

#2

Hey,

Can you send to us the link of this section? I have tried to find and I could not.

#3

That post is at http://www.realhdr.com/castle2017/. Links to all of the posts are at the bottom of http://www.realhdr.com/stagecraft/.

#4

Hi There,

Please add the following code to Theme Options CSS

@media(max-width: 769px) {
.single-post .x-container.width {
     width: 100%;
    margin-top: 0;
}}

Hope it helps

Thanks!

#5

Sweet! Wasted space reclaimed. Now THAT is recycling.

I tried to make the bottom post border go away but wasn’t able to hit on the combination. What’s that css? The border to kill is the one below the Cartooning post and the above the blue footer:

I also notice that setting width to 100% effected the menu on posts, too. They’re flush with left and right sides of the display like this:

when they should look like this menu from a page:

#6

Hi There,

Please try with this CSS instead:

.single-post .entry-wrap {
    border: none;
}
#7

I tried both of the methods below and still have the post container. I need to get rid of the wasted container space on mobiles (but I’ll take it gone everywhere if that’s easier), but not have the mobile menu jump out to the edges of the display.

I have X Child Theme > Customize > Blog set to Fullwidth for Blog and Archives. The Instant Rust post at: http://www.realhdr.com/rust/ has no grid or anything else special on it. Your login info is above. Thanks.

.single-post .entry-wrap {
    border: none;
}

and

.single-post .entry-wrap {
    border: none !important;
}
#8

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!

Mobile content padding for category pages, blog and pages
#9

Thanks, friech! That left me with what looked like a shadow on the top where the container was, so I was able to figure out enough from Inspector that I added the .x-boxed-layout-active method at the end to get rid of it. I also decided to kill the container for desktop pages since you were kind enough to give me the @query.

/* BEGIN Remove Post Container */
@media (max-width: 4000px) {
	.single-post .entry-wrap {
		border-radius: 0;
		border-width: 0;
		box-shadow: none;
		padding: 70px 0 0 0;
	}
}

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

.x-boxed-layout-active .has-post-thumbnail .entry-featured {
    border: none;
}
/* END Remove Post Container */
#10

Glad you’ve sorted it out and thank you for sharing.

Cheers!