Pages not displaying correctly on mobile since Wordpress Update

Hi there,

does this CSS fix it?

@media(max-width: 768px) {
    .wp-block-columns {
        flex-wrap: wrap !important;
    }
}

Hi David. I added it and cleared the cache and tried a different mobile browser too but it's still the same I'm afraid.

Hi Jenni,

I'm not seeing the code has been added to your site.

How did you add the CSS?

Can you try to disable your cache plugin?

Hi Ying.

I can see it in the code at line 255 on the second site I mentioned, the .org.

I didn't add it to the other yet as it doesn't appear to work for me. I disabled caching yes.

Jenni

No, I don't see it.

As you can see if the CSS has been added to your site correctly, it should work like this:
https://www.screencast.com/t/FmqTlakhWUXr

Sorry, I'm not sure what I'm meant to do with your screen cast.

Here's where I put the CSS and where I can see it: https://imgur.com/a/whNrEQw

Did I do that wrong?

Thanks

There're multiple errors in the screenshot of your CSS, there might be more not caught in the screenshot.

I've marked out some errors:
https://www.screencast.com/t/KC0bJgyu7u

Try fixing those 3 errors first to see if that works.

If it still doesn't, paste all your CSS to this tool to check each piece of CSS:
https://jigsaw.w3.org/css-validator/#validate_by_input

Thank you. I tried that. Still no luck on either site. What should I try next please?

Hi Jenni,

There’s still probably syntax errors in your CSS codes.

Perhaps you can share the CSS in found in your Additional CSS here?

Kindly put them in a Code Block and I’ll take a look.

Hope to hear from you soon.

Site 1:

`.inside-article a:hover {
text-decoration: underline;
}

.border {
border:1px solid #A9A9A9;
}

.bordered {
padding:20px;
border:10px solid #61bd39;
}

h6 {
font-size: 12px;
}

.small {
font-size: 14px;
}

.custom-group {
padding: 10px;
border: 1px solid #ccc;
}

blockquote {
background:#f9f9f9;
}

cite {
font-weight: bold;
font-size: 80%;
}

.top-bar {
background: #61bd39

}

.widget.widget_recent_entries ul li {
padding-bottom: 20px;
line-height: 1.1;
}

.cat-links {
display: none;
}

.post-navigation {
display: none;
}

.category h1.page-title {
display: none;
}

.category .page-header {
display: none;
}

.inside-header {
padding: 10px;
}

.w3-panel{padding: 10px 10px 0.1px 10px;}.w3-panel{margin-top:16px;margin-bottom:16px;

.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important;

@media screen and (max-width: 600px) {
th, td {
font-size: 14px;
}

.wp-block-gallery {
display: flex;
flex-wrap: wrap;

@media(max-width: 768px) {
.wp-block-columns {
flex-wrap: wrap !important;
}
}

Site 2:

`

.inside-article a:hover {
text-decoration: underline;
}

.page-title {
font-size: 50px;
padding-bottom: 50px;
}

.entry-title {
margin-top: 0em
}

h2, h3 {
margin-top: 2em;

}

h6 {
margin-top: 0em;
margin-bottom: 5em;

}

.entry-content:not(:first-child) {
margin-top: 0em;
}

/* Mediavine sidebar fix */

@media only screen and (min-width: 769px) {
.right-sidebar .content-area {
max-width: calc(100% - 300px);
}
.right-sidebar .sidebar {
min-width: 300px;
}
}

/* end fix */

@media (min-width:769px) {
.main-navigation .main-nav ul li.highlight a {
background-color: #FF8138;
color: #ffffff;
line-height: 35px;
}
@media (min-width:769px) {
.main-navigation .main-nav ul li.highlight
a:hover {
background-color: #38B6FF;
color: #000000
}
}
@media(max-width: 768px) {
.wp-block-columns {
flex-wrap: wrap !important;
}
}

There were a couple of syntax errors for both sets of codes.

Site 1:

.inside-article a:hover {
    text-decoration: underline;
    }
    
    .border {
    border:1px solid #A9A9A9;
    }
    
    .bordered {
    padding:20px;
    border:10px solid #61bd39;
    }
    
    h6 {
    font-size: 12px;
    }
    
    .small {
    font-size: 14px;
    }
    
    .custom-group {
    padding: 10px;
    border: 1px solid #ccc;
    }
    
    blockquote {
    background:#f9f9f9;
    }
    
    cite {
    font-weight: bold;
    font-size: 80%;
    }
    
    .top-bar {
    background: #61bd39;
    
    }
    
    .widget.widget_recent_entries ul li {
    padding-bottom: 20px;
    line-height: 1.1;
    }
    
    .cat-links {
    display: none;
    }
    
    .post-navigation {
    display: none;
    }
    
    .category h1.page-title {
    display: none;
    }
    
    .category .page-header {
    display: none;
    }
    
    .inside-header {
    padding: 10px;
    }
    
    .w3-panel{padding: 10px 10px 0.1px 10px;}
    
    .w3-panel{margin-top:16px;
        margin-bottom:16px;}
    
    .w3-yellow, .w3-hover-yellow:hover{color:#000 !important;
        background-color:#ffeb3b !important;
    }
    
    @media screen and (max-width: 600px) {
    th, td {
    font-size: 14px;
    }
}
    
    .wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    }
    
    
    @media(max-width: 768px) {
    .wp-block-columns {
    flex-wrap: wrap !important;
    }
    }

Site 2:

.inside-article a:hover {
    text-decoration: underline;
    }
    
    .page-title {
    font-size: 50px;
    padding-bottom: 50px;
    }
    
    .entry-title {
    margin-top: 0em;
    }
    
    h2, h3 {
    margin-top: 2em;
    
    }
    
    h6 {
    margin-top: 0em;
    margin-bottom: 5em;
    
    }
    
    .entry-content:not(:first-child) {
    margin-top: 0em;
    }
    
    /* Mediavine sidebar fix */
    
    
    @media only screen and (min-width: 769px) {
    .right-sidebar .content-area {
    max-width: calc(100% – 300px);
    }
    .right-sidebar .sidebar {
    min-width: 300px;
    }
    }
    
    /* end fix */
    
    
    @media (min-width:769px) {
    .main-navigation .main-nav ul li.highlight a {
    background-color: #FF8138;
    color: #ffffff;
    line-height: 35px;
    }
}
    @media (min-width:769px) {
    .main-navigation .main-nav ul li.highlight
    a:hover {
    background-color: #38B6FF;
    color: #000000;
    }
    }
    @media(max-width: 768px) {
    .wp-block-columns {
    flex-wrap: wrap !important;
    }
    }

Kindly try updating your codes with these and check once more.

Thanks for your help, I've replaced the CSS with your corrected version on both sites and cleared cache but I am still seeing the issue.

I fixed it! I noticed that the about page on site 2 was now working okay, I just so happened to edit that page yesterday. So i went into the other about page and the homepages and clicked update without making any changes and they all work now. Thanks for your help!