[Resolved] White space + alignment issues in tablet view

Home Forums Support White space + alignment issues in tablet view

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1346305
    William

    Hi all, sorry if I’ve been asking for a lot of help recently. Trying to launch site as soon as possible, so I do apologize.

    1.) Anyways, when in tablet view, the first post on my homepage (wpsp #3429), there’s white space to the right of the picture. I tried changing the width but it’s not working.

    This also happens when shrinking the browser tab. While shrinking, the excerpt will slowly move from the right of the post to the bottom and there will be white spaces until the browser tab reaches mobile size. How can I fix it?

    How can I get rid of the white space and are there any CSS I can use while shrinking the browser tab? Instead of slowly watching the excerpt move from right to bottom, once it reaches tablet size it automatically shows the “correct” tablet format on tab.

    2.) For the “recent posts” section in the sidebar (wpsp #3504) inside a post, when I use the vertical view in tablet (and when I shrink browser tab to a certain size, approximately about the same size as a vertical tablet view), there’s excess margin and/or padding. Is it possible to make it 2 columns since there are 6 posts so 3 on each only in vertical tablet view?

    3.) For the footer bar in horizontal tablet view, “Follow Us” and ” Navigation” is on top while “Disclaimer” is at the bottom. How can I just make it look like the mobile version where they are stack on top of each other? .

    Once again, Thank You!
    Site password: Generatepress

    #1346787
    David
    Staff
    Customer Support

    Hi there.

    1. You’re image is only 650px wide – so you would need to have a large image to fill the space.

    2. Try this CSS:

    @media(max-width: 768px) and (min-width: 500px) {
        #wpsp-3504 {
            display: flex;
            flex-wrap: wrap;
            padding-left: 2.5%;
        }
        
        #wpsp-3504 .wp-show-posts-single.post {
            flex: 1 0 45%;
            margin-right: 5%
        }
    }

    3. Try this CSS:

    @media (max-width: 1024px) and (min-width: 768px) {
        .inside-footer-widgets .tablet-grid-50 {
            float: none;
            width: 100%;
        }
    }
    #1347333
    William

    Thanks David! I decided to use 2 columns so that should fix the first issue. The other works perfectly.

    Just one minor request. So the footer alignment works, but it doesn’t work on my other website. I’ve updated the URL link and if you can check it out and see why it’s not working would be great.

    Thanks so much David!

    #1347530
    David
    Staff
    Customer Support

    Try moving that CSS to the top of your current CSS and then clear any caches.
    If it still isn’t working – leave the CSS in place, disable autoptimize and let us know.

    #1347634
    William

    Thank You David! Works perfectly now!

    #1347893
    David
    Staff
    Customer Support
    #1348662
    William

    Hi David, unfortunately it doesn’t work again. I deleted the cache using autoptimize (with the same settings as recommended by Generatepress) and it changed my website layout. I disabled it, the website layout is backed to normal and now the footer CSS and the recent post CSS you provided above is not working along with another CSS:


    @media
    (max-width: 767px) {
    #wpsp-464 .wp-show-posts-image img,
    #wpsp-476 .wp-show-posts-image img,
    #wpsp-467 .wp-show-posts-image img,
    #wpsp-423 .wp-show-posts-image img, #wpsp-426 .wp-show-posts-image img, #wpsp-429 .wp-show-posts-image img {
    height: 150px;
    width: 100%;
    object-fit: cover;
    }
    }

    I have since deleted autoptimize and install wp fastest cache to clear any remaining cache and the CSS still not working. Any idea why and how I can get those CSS back to work again? Thank You!

    #1349162
    David
    Staff
    Customer Support

    Issue isn’t cache related ( and autoptimize is the one cache plugin that is less likely to mess with your CSS ). There are serveral errors in your CSS all related to missing closing brackets – i comment below:

    .wpsp-related-posts1 {
    padding: 10px 10px 10px 0px;
    margin-top: 15px; /* <------ missing closing } */
    
    /* Media */
    @media (max-width: 1024px) and (min-width: 768px) {
    .inside-footer-widgets .tablet-grid-50 {
    float: none;
    width: 100%;
    }
    }
    
    @media (max-width: 768px) {
    .post-image img {
    max-width: 100%;
    } /* <------ missing second closing } */
    
    @media (max-width: 768px) {
    #mobile-header {
    background-color: #ffffff;
    } /* <------ missing second closing } */
    
    @media(max-width: 768px) and (min-width: 500px) {
    #wpsp-521 {
    display: flex;
    flex-wrap: wrap;
    padding-left: 2.5%;
    }
    #wpsp-521 .wp-show-posts-single.post {
    flex: 1 0 45%;
    margin-right: 5%
    }
    }	
    @media (max-width: 767px) {
    #wpsp-464 .wp-show-posts-image img, 
    #wpsp-476 .wp-show-posts-image img, 
    #wpsp-467 .wp-show-posts-image img,
    #wpsp-423 .wp-show-posts-image img,     #wpsp-426 .wp-show-posts-image img,     #wpsp-429 .wp-show-posts-image img {
    height: 150px;
    width: 100%;
    object-fit: cover;
    }
    }
    } /* <---- remove the last two brackets */
    } 
    #1349747
    William

    Thanks, David! All back to normal now. Just curious as to why it was working before I cleared cache on autoptimize? Did it somehow clear those brackets along the process?

    #1349769
    David
    Staff
    Customer Support

    Glad to hear that.
    Autoptimize wouldn’t have stripped out any of the CSS you have in the customizer or your stylesheets. What it does is create a copy of all the CSS, minimizes ( removes spacing and comments ) and combines it all together in one cached packet which gets loaded instead of the original stylesheets.

    Why it worked before – i can’t really say.

    #1349777
    William

    I see. Thank You very much for your help!

    #1349791
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.