Dawn - resize image on desktop - image with text

[Ben1000]

Hi,

I'm using the Dawn 2.0 theme.

In the top of my home page there is an 'image with text' section. 

On the desktop version, the image is cut in the sides, therefore I want to decrease the image size, so the whole image will fit in.

How can I do it?

https://wortheattt.myshopify.com/

Thanks

[KetanKumar · Accepted solution]

@Ben1000 

try this 

@media only screen and (min-width: 750px) {
  #MainContent>#shopify-section-template--14625265319989__16459638514e39b28f:first-child .media>img { object-fit: contain; }
}  

[KetanKumar]

@Ben1000 

sorry for that issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.media>img {object-fit: contain;}

[malipetek]

Hi Ben,

I played around in devtools and found this css prop. This can solve the thing for you but might also change how images are displayed throughout the store.

[Ben1000]

Hi @malipetek @KetanKumar ,

Thanks, but it works to all sections:

1. Only the desktop version
2. Only for the 'image with text' section in the top of my home page.

Besides that, is there an option to control the size of the image and increase/decrease the image as much as I want?

[malipetek]

If you want it to be that way only on that specific section and desktop view, you can do something like this:

@media only screen and (min-width: 750px) {
  #MainContent>.shopify-section:first-child .media>img { object-fit: contain; }
}

And no there is no settings to fine tune image size, position etc. You can add it tho by modifying your theme.

[Ben1000]

Hi @malipetek,

Thanks, but I also want it to be only on the first section in my home page (14625265319989__16459638514e39b28f)

https://wortheattt.myshopify.com/

[KetanKumar · Accepted solution]

@Ben1000 

try this 

@media only screen and (min-width: 750px) {
  #MainContent>#shopify-section-template--14625265319989__16459638514e39b28f:first-child .media>img { object-fit: contain; }
}  

[malipetek · Accepted solution]

That css selector should apply to only first section already. Look: 

[Ben1000]

Hi @malipetek @KetanKumar 

Thank you for the solutions, they are working well.

@malipetek does "first child" means "the first section" in the current page?

[malipetek]

My pleasure Ben,

:first-child means first child, check this out:

[KetanKumar]

@Ben1000 

its my pleasure to help us