Updates consistently break responsive views

I’ve figured out what’s gone wrong:

The CSS that I wrote to hide the Site Description below 420px no longer works in Astra 3.6.0 (I can’t quite figure out why though).

To fix this I’ve used CSS Hero to identify the site description and hide it again under 420px – this works, however it then throws the #content out requiring that to then be adjusted again at lots of different screen widths.

This is incredibly frustrating as each update throws up CSS issues like this. Is this an edge case situation for me or does this happen to others?

—

Also on a side note, I couldn’t figure out why changes I that I was making to the child theme stylesheet were not being recognised.. the information about updating the CHILD_THEME_ASTRA_CHILD_VERSION constant version to higher than 1.0.0 in the functions.php file in this topic here fixed it:

https://ww.wp.xz.cn/support/topic/how-to-make-css-changes-in-child-style-sheet/

—

I’d still appreciate an answer as I’d really like to avoid this happening again in the future as it takes so much time to problem solve then re-write the CSS after each update.

Kind regards,

Tim

Hi Herman,

Thanks for replying and I can see now how it’s the displaying of the site title of which I’ve previously hidden that threw the content of the website out.

The CSS that worked to hide the site description previously was:

@media only screen and (max-width: 420px) {
.site-description {
display: none;
}

As I mentioned this no longer worked after the update, but I used CSS Hero to identify the selector again and now this works:

@media only screen and (max-width: 420px) {
.ast-theme-transparent-header .site-header .site-description {
display: none;
}

I really don’t understand how that can be a thing as when I inspect the element, it looks like just using ‘.site-description’ should work.

Regardless, it works now. My frustration comes from the hours worth of sifting through CSS to correct these things after I’ve spent a long time writing the CSS in the first place. I’m still fairly new to all of this web development so I suspect with time I’ll get more proficient at this.

—

Regarding Astra being fully responsive, I understand.. however in my case I’ve had to write media queries for every single page for multiple widths. I do wonder whether I’ve had conflicts with Elementor as I’ve used that to build a few pages.

With one of the Astra updates in the past I found myself having to re-write all my CSS, as all the media queries needed adjusting following the update. I’d really like to never have to do that again 🙂

—

I’ve now moved all my CSS into the stylesheet of the child theme (and made sure the child theme style sheet recognises the CSS by following the guidance in the link I posted).

So in theory any further updates should not throw out my CSS?

Kind regards,

Tim