Banner image on landing page does not resize properly. Any ideas?

Solved
Excursionist
37 0 2

Hello everyone!

 

My website is www.petgrotto.com

 

I can't figure out how to resize my image (TIME FOR A NEW PET PED?) so that it fits perfectly with my shopify website. I have tried different sizes and now its at 1200px and 400px but its not as sharp and the title is cut. Can anyone give me some clues as how I can size an image to fit MEDIUM size for my banner? Or do I need to do some coding so that it fits?

 

Thanks!

0 Likes
Shopify Staff
Shopify Staff
229 14 37

Hi, there

 

My name is Ren from the Shopify support team, here to help. Judging by the layout it looks like you're using Debut. Is the section you're working with "image with text" or a segment of the slideshow? Generally, it's less about the size of the image and more about the ratio. You can check out our help document here for Debut.

 

Here's a helpful chart you can reference when reformatting the image. The recommended width-to-height ratio is 2:1.

 

Additionally, we have a free image resizer here to help you optimize the picture and improve the clarity.

Outside of the suggestions above, you can always use editing software like photoshop to resize your image or create deeper margins or add a frame which would also help eliminate the cropping you are experiencing. Let me know your thoughts! 

Any plans for a Black Friday Cyber Monday promotion? Make sure to check out our BFCM toolbox to get you inspired and prepared. 

 

 

Ren | Social team @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

1 Like

Hello,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media only screen and (min-width: 750px) {
 .main-content {
  padding-top:55px !important;
 }
}
@media only screen and (max-width: 750px) {
 .main-content {
  padding-top:35px !important;
 }
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Excursionist
37 0 2

Hello! I tried the code but it didn't work.

 

I found out that for some reason, my image is being pushed up into the header because if I moved the image to the bottom or anywhere else besides the top, it fits perfectly. How would I add some padding or spacing from the top to push my image down?

0 Likes

Success.

Hello konthy,

Please add below code

.index-section--flush:first-child {
	margin-top: 0 !important;
}
@media only screen and (min-width: 750px) {
 [class*="index-section--flush"]:last-child {
  margin-top: 0 !important;
 }
}
.hero.hero--medium {
	height: auto !important;
	padding: 13% !important;
	background-size: 100% 100% !important;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
Highlighted
Excursionist
37 0 2

Thanks so much for the help! Worked perfectly :)

0 Likes