[Resolved] content padding on mobile

[Jiren]

I have again this problem, on another site of mine. I want to adjust the content padding on mobile devices left and right. For testing purposes I set on 0 right, but when I reload its again reseted.

my additional css code :

/* 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: 12px;
}
.message {
      font-size: 12px;
}

/*red line below nav bar*/
.main-navigation {
    border-bottom: 6px solid #FF4E50;
}

/*red line below featured image*/
.page-header-image-single {
     border-bottom: 9px solid #FF4E50;
}

my simple css code:

/* 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;
}
}

[David]

Hi there,

In your CSS you have this:

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

Which is overriding the padding set in the Customizer > Layout > Container

[Author]

Posts