Site logo

Archived topic

Mobile container padding

18 replies · Started by Jiren on April 24, 2020

Viewing posts 1–15 of 19

Hi,

When I set the padding in the customizer/layout/container for mobile it does not change anything on my own mobile device.

Could you check if this code affects/overrides it?

/* GeneratePress Site CSS */ 
.sidebar .widget {
    border: 1px solid rgba(232, 234, 237, 1);
    box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

/* Featured widget
.sidebar .widget:first-child {
	background-color: #e86000;
	color: #fff;
}
*/

.sidebar .widget:first-child .widget-title,
.sidebar .widget:first-child a:not(.button) {
	color: #000000;
}

.sidebar .widget li {
	margin-bottom: 15px;
}

.button.light {
	background: #fff;
	color: #000;
}

.button.light:hover {
	background: #fafafa;
	color: #222;
}

.separate-containers .page-header {
	background: transparent;
	padding: 20px 0;
}

.page-header h1 {
	font-size: 30px;
}

@media (min-width: 769px) {
	.post-image-aligned-left .post-image img {
		max-width: 300px;
	}
} /* End GeneratePress Site CSS */

/* Hiding Category Title */
.category .page-header {
    display: none;
}

/* for last updated text */
.blog .posted-on .updated:before, .archive .posted-on .updated:before {
    content: "Posted on: ";
}
.single .posted-on .updated:before {
    content: "Last Updated on ";
}
.posted-on .updated {
    display: inline-block;
}
.posted-on .published {
    display: none;
}

/* Content Width on Mobile devices */

@media (max-width:768px) {
      .one-container .site-content,
      .separate-containers .inside-article {
            padding: 20px;
      }
}

/*underline links in content area*/
.entry-content a:not(.read-more):not(.button):hover {
    text-decoration: underline;
}

/*display blog posts in a single container with seperator*/
.separate-containers .site-main>
* {
    margin-bottom: 0;
}

.inside-article {
    border: 0;
    box-shadow: 0 0 0;
}

.site-main {
    border: 1px solid rgba(232,234,237,1);
    box-shadow: 0 0 10px rgba(232,234,237,.5);
}

.blog .site-main > article,
.archive .site-main > article {
    border-bottom: 1px solid #eee;
}
/*displaying the sidebar widget on mobile devices in containers*/
@media (max-width: 768px) {
    #right-sidebar {
        padding: 10px 20px;
        box-sizing: border-box;
        background-color: #fff;
    }

    #right-sidebar .inside-right-sidebar > aside {
        border: 1px solid #ccc;
    }
}

/*author meta style*/
.byline img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

.comments-link,
.posted-on {
	border-left: 1px solid #ddd;
	padding-left: 10px;
	margin-left: 10px;
}

/*author meta style 2 lines*/
.entry-header .entry-meta {
    border-top: 2px solid #000;
    padding-top: 5px;
}
.message {
    border-bottom: 2px solid #000;
		padding-bottom:5px
}

/*font size meta*/
.entry-meta {
    font-size: 11px;
}
.message {
      font-size: 12px;
}
/*red line below nav bar*/
.main-navigation {
    border-bottom: 5px solid #f00;
}

Hi there,

Looks like this is causing the issue:

@media (max-width:768px) {
      .one-container .site-content,
      .separate-containers .inside-article {
            padding: 20px;
      }
}

Let me know if this helps :)

Okay left and right I can allign, but top is "resetting" when I publish it. When I go again in the customizer and allign it its working but saving and reloading is resetting it.

Can you disable Autopimize so I can take a closer look at the source and code?

Done.

I believe you have this CSS added in Simple CSS:

@media (max-width: 768px) {
    .separate-containers .inside-article {
        padding-top: 0px;
    }
}

I have adjusted the 0px to 15px but it still resets it if I reload the site.

Is this maybe the reason why it setts it at 0px.

.separate-containers .site-main, .entry-content {
margin-top: 0px;

I'm still seeing the same CSS as before.

Can you just remove them for now?

Don't think you need them at all.

I need the css in order to allign my container with the nav bar on mobile devices.

The simple css is like this in full:

/* remove space between nav bar and content */

@media (max-width: 768px) {
    /* CSS in here for mobile only */

.separate-containers .site-main, .entry-content {
    margin-top: 0px;
}
.separate-containers .inside-article {
    padding-top: 15px;
}
}

Alright, removed all in simple css.

*?

Sorry I thought I replied to this yesterday.

I'm still seeing this CSS added:
https://www.screencast.com/t/IICJBIANIJoI

Can you check if that's added in the Simple CSS of that page?

It doesn't look like other pages have it.

Yes true, it was added there. Removed that as well.

This archived topic is closed to new replies.