Dawn Shopify mobile - pictures in text with image boxes cut off

[hnaegele]

Hoping someone can help - I’m using the Dawn Shopify theme and on the mobile version is causing some issues with picture size on the homepage - http://29and11.com.  I have two !text with image’ containers and each one has a square picture on the desktop version.  But in the mobile view, each one appears to be cut in half.  Can anyone help with this?

Thank you!!

[devmont-digital · Accepted solution]

Follow these steps:

1. Navigate to Online Store -> Themes -> Edit code.

2. Search for the file named base.css.

3. Scroll to the bottom of the file and paste the provided code.

@media(max-width:600px){
.image-with-text__content{
    padding-top: 0 !important;
}
.image-with-text__text-item.grid__item{
    margin-top: -40px !important;
}
}

[devmont-digital]

Hello @hnaegele,

If you want to ensure that the picture is not cut on mobile, follow these steps:

1. Navigate to Online Store -> Themes -> Customize.

2. Go to the "Image with Text" section.

3. Set the image height to adapt to the image.

1. 

[hnaegele]

That worked perfectly - thank you so much!  One other question if I may, around the pictures in both of the containers on the mobile view is really large.  I've got it set to 0 for the top and bottom padding in the customize theme section, but is there anything I can do to make them smaller and closer to the text?  Thank you!!!

[devmont-digital]

Follow these steps:

1. Navigate to Online Store -> Themes -> Edit code.

2. Search for the file named base.css.

3. Scroll to the bottom of the file and paste the provided code."

@media(max-width:600px){
.image-with-text__content{
    padding-top: 0 !important;
}
}

[hnaegele]

That's definitely getting there. But is there anyway to make the spacing between the pictures and the text "What we do' and 'Who we are' even less? I'd like it to mirror the gap between the title "What we do" and the text that starts 29 AND11 was created to fill...

Thank you!!!

[devmont-digital · Accepted solution]

Follow these steps:

1. Navigate to Online Store -> Themes -> Edit code.

2. Search for the file named base.css.

3. Scroll to the bottom of the file and paste the provided code.

@media(max-width:600px){
.image-with-text__content{
    padding-top: 0 !important;
}
.image-with-text__text-item.grid__item{
    margin-top: -40px !important;
}
}

[hnaegele · Accepted solution]

That worked perfectly - thank you so much for working through this with me!!!