Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

Site URL: https://rockcreek-church-new.squarespace.com/

Hello all! 

I'm working on website for a client that is a church. Got everything pretty much laid out and designed. I go to mobile view however and all the banner images on the home page are cropped really bad and the CSS code I had didn't work. I want them to all rescale so you can see the banner image. Reasoning is because I do custom graphics for their banner images or I'm using their series graphics as banners etc. They want to be able to see all that on mobile with the custom graphic stuff.

Can anyone help me. I've added screenshot of desktop version and what mobile looks like. Any help today would be AMAZING! Thanks! 

 

Screen Shot 2020-02-20 at 7.28.39 AM.png

Screen Shot 2020-02-20 at 7.28.52 AM.png

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 0
1 minute ago, barrysutton said:

I have the same issue. Did you manage a fix? Would love to use the code as well.

If you share link, I can take a look.

Yesterday I solved similar case, use New Image for Mobile with CSS

Also, you can use CSS to resize image & height


COVID-19: Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
26 minutes ago, barrysutton said:

OK thanks, you'll see on my homepage barrysutton.com. When you go to mobile I would like to see the entire banner image, not just a crop.

this image or?

image.thumb.png.e02195a97508f4fce520ee94d0fb338d.png


COVID-19: Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
25 minutes ago, barrysutton said:

Yes, I would like to apply to any banner image so does not get cropped.

Image like this?

image.thumb.png.242919935fa5ee479dd74692e9dd45de.png


COVID-19: Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
21 hours ago, barrysutton said:

HI Sorry for the late reply yes!

I checked & found code yesterday & save code in my laptop. Unfortulately It has problems, I just bought new laptop

I will check again later ☹️


COVID-19: Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
On 2/28/2020 at 11:10 PM, barrysutton said:

HI Sorry for the late reply yes!

add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
[data-section-id="5e3b0863c8261f7ac1caae2f"] .section-background img {
    object-fit: contain !important;
}
[data-section-id="5e3b0863c8261f7ac1caae2f"] {
    padding-top: 0 !important;
    min-height: 60vh !important;
}
}

 


COVID-19: Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
5 hours ago, tuanphan said:

add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
[data-section-id="5e3b0863c8261f7ac1caae2f"] .section-background img {
    object-fit: contain !important;
}
[data-section-id="5e3b0863c8261f7ac1caae2f"] {
    padding-top: 0 !important;
    min-height: 60vh !important;
}
}

 

Thanks so much - it works great. I really appreciate your commitment to helping so many SS users and developers.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...