Solved

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

hnaegele
Excursionist
29 1 3

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!!

Accepted Solutions (2)
devmont-digital
Shopify Partner
97 23 23

This is an 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;
}
}

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io

View solution in original post

hnaegele
Excursionist
29 1 3

This is an accepted solution.

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

View solution in original post

Replies 6 (6)

devmont-digital
Shopify Partner
97 23 23

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. Capture.PNG
Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
hnaegele
Excursionist
29 1 3

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
Shopify Partner
97 23 23

 

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

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
hnaegele
Excursionist
29 1 3

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
Shopify Partner
97 23 23

This is an 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;
}
}

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
hnaegele
Excursionist
29 1 3

This is an accepted solution.

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