FROM CACHE - en_header

Dawn - resize image on desktop - image with text

Solved
Ben1000
Trailblazer
262 3 55

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

 

Accepted Solutions (2)

Accepted Solutions
KetanKumar
Shopify Partner
34566 3457 11300

This is an 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; }
}  
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

malipetek
Shopify Partner
45 5 6

This is an accepted solution.

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

malipetek_0-1647863156517.png

malipetek_1-1647863203173.png

 

 

View solution in original post

Replies 10 (10)
KetanKumar
Shopify Partner
34566 3457 11300

@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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
malipetek
Shopify Partner
45 5 6

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.

malipetek_0-1647831098596.png

 

Ben1000
Trailblazer
262 3 55

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
Shopify Partner
45 5 6

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
Trailblazer
262 3 55

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
Shopify Partner
34566 3457 11300

This is an 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; }
}  
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
malipetek
Shopify Partner
45 5 6

This is an accepted solution.

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

malipetek_0-1647863156517.png

malipetek_1-1647863203173.png

 

 

Ben1000
Trailblazer
262 3 55

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
Shopify Partner
45 5 6

My pleasure Ben,

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

malipetek_0-1647884208504.png

 

KetanKumar
Shopify Partner
34566 3457 11300

@Ben1000 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing