Archived topic
Archive Padding on Mobile
3 replies · Started by Zad on November 8, 2018
I'm having some trouble with padding on mobile. Here is some of the CSS code I currently have implemented on my site to have white space around my content while not affecting mobile.
/* Adjusts the padding on Desktop, while keeping Mobile Padding constant */
.main-navigation ul ul {
width: 100%;
}
@media (min-width:769px) {
.single.one-container .site-content {
padding-left: 270px;
padding-right: 270px;
}
}
/* Blockquote settings on desktop and mobile */
blockquote {
background-color: #F9F9F9;
border-left: 2px solid #57a4ba;
font-size: 13.5pt; /* set desktop size */
font-style: normal;
font-weight: medium;
color: #000000;
padding-left: 25px;
padding-top: 20px;
padding-bottom: 20px;
}
@media (max-width: 768px) {
body {
font-size: 17px;
}
blockquote {
font-size: 15px; /* set Mobile size */
}
}
/* Adjusts spacing on Archive page summaries */
.entry-summary {
margin-top: 0.3em;
}
@media (min-width: 768px) {
.post-image-above-header .inside-article .post-image {
margin-bottom: 65px !important;
}
}
/* Adjusts padding for footer widgets on desktop */
@media (min-width: 768px) {
.footer-widgets {
padding: 40px 350px 0 350px;
}
}
Unfortunately, on mobile, there is no left and right padding on the archive pages as shown here,
If I try to increase the mobile left + right padding via the customizer, it starts adding too much padding to the single posts on mobile which already have too much padding (shown here)
Single posts currently at this setting on mobile have this much padding when there's *no padding* on archive. So archive fills up the entire screen on this setting while theres already a lot of padding on single posts for mobile. So increasing padding to make space for archive would add even *more* padding to this single post on mobile, leaving little space for text of the single posts, so the customizer for padding isn't much help.
Is there any way I can add padding to the archive pages while not affecting the content on mobile on single posts?
Hi there,
Try this CSS:
@media (max-width: 768px) {
.archive.one-container .site-content, .blog.one-container .site-content {
padding-left: 10px;
padding-right: 10px;
}
}
Let me know if this helps :)
Hi Leo, thanks! It worked perfectly!
No problem :)