Site logo

Archived topic

Archive Padding on Mobile

3 replies · Started by Zad on November 8, 2018

Viewing posts 1–4 of 4

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,

https://imgur.com/a/ugL9Xds

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)

https://imgur.com/a/1MdpYOA

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 :)

This archived topic is closed to new replies.