Keep original image ratio in Dawn theme / Image & Text

[INFRA]

Hi there,

I have the image &text section showing up like below, but I want the section to be the height of the image (2nd example).  What code could I use for this?

Current:

I would like it to show like below instead:

 

 Thanks!

Website

password: fbc

[TikitaTech]

Hey @INFRA! 

What page is this image on?

[INFRA]

ah sorry, it's here!

[TikitaTech]

Hi @INFRA!

In Admin, go to Main Content, with the section 'Daytrips Galore'.

Add Custom CSS:

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0;
  }
}

.page-width {
  max-width: 100%;
  margin: 0;
}

This will achieve this:

 Let me know if you need any more details. Hope this helps!

[INFRA]

hi, I'm getting below error. Anything else I can try? Or is it interfering with the code I've added above it ? Thanks so much for your help!

[TikitaTech]

Ah, it might be that the overlap in screen sizes is causing the errors, try this and let me know if your Custom CSS still has errors.

@media (max-width: 767px) {
    .image-with-text__grid {
        flex-wrap: wrap-reverse;
    }
}

@media (min-width: 768px) {
    .page-width {
        padding: 0;
        margin: 0;
        max-width: 100%;
    }
}

[INFRA]

thanks again!

I think .page-width might be the issue here?

 

[TikitaTech]

I believe the issue is that Custom CSS is not allowing media queries in this specific section.

To apply this media query, you’ll need to add the styles to the global CSS file.

Go to Admin > Online Store > Themes, click on the three dots next to the theme, and select Edit Code.

In the sidebar, go to assets. You’ll see a list of .css and .js files. Look for a file that matches the section’s name, possibly something like section-template.css or main-content.css.

Open that file and press Ctrl+F (or Cmd+F on a Mac) to bring up the search bar.

Type in 'page-width'. Once you find it you can add or adjust the CSS as in the above message.

Let me know if you find the right section. I hope this helps!