Why isn't my media query working in my blog post layout?

Store Design
1

Hey, I’m using the Editorial theme and trying to change the layout for my blog posts in mobile view to prevent the content getting all squeezed together.

In the theme editor I go to the blog post template, and there is a media query in the custom CSS box. But any code I add under the media query isn’t working. When I add the same CSS code outside of the media query it does work, so the media query seems to be the culpit.

I have read everything I could find in the shopify community on this topic but none of the suggestions seem to work for me. What have I missed?

Custom CSS:

/* Default image dimensions */
img {
  width: 40%;
  height: auto;
}
.img-left {
  margin-right: 40px;
  float: left;
}
.img-right {
  margin-left: 40px;
  float: right;
}
.paragraph2 {
  font-size: 18px;
}
h1 {
  text-align: left;
  margin-bottom: 30px;
}
p {
  text-align: left;
}
h4 {
  text-align: left;
} 

/* Media query for mobile devices */
@media only screen and (max-width: 768px) {
  h1 {
    text-align: center;
  }
  img {
    width: 500px;
    height: 288px;
  }
}

I have this in my theme.liquid code:

This is the blog post: https://freakysauces.com/blogs/recipes/how-to-prepare-black-bean-tacos

2

Hi @margarita7

Seems like its working on the inspect tools. This is what ive used.

@media only screen and (max-width:769px){
#shopify-section-template--19117707034948__main h1 {
    text-align: center;
}
}

Result:

Made4uoRibe_0-1702659502724.png
Made4uoRibe_0-1702659502724.png555×338 13.9 KB

If still not working you add !important.

Example.

@media only screen and (max-width:769px){
#shopify-section-template--19117707034948__main h1 {
    text-align: center !important;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hi @margarita7 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

4

yees thank you!!!

So should I only update the CSS from theme.liquid from now on? Or at least for the mobile view?