Archived topic
White space + alignment issues in tablet view
11 replies · Started by William on June 29, 2020
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
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%;
}
}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!
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.
Thank You David! Works perfectly now!
Glad to hear that.
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!
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 */
} 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?
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.
I see. Thank You very much for your help!
You're welcome
