Jump to content

Images cropped on mobile

Recommended Posts

Site URL: http://andbaron.com

My site is formatted exactly how I want, and images are cropped in just the right way for desktop. When previewing or visiting the site on mobile, there is no sort of good responsive design happening. Everything is just cropped to death to the width of a mobile screen, instead of shrinking images proportionally. Is there any way to retain full images, but obviously to reduce size globally to work on a mobile screen... like 99.9% of other websites?

Link to comment
  • Replies 37
  • Views 3.8k
  • Created
  • Last Reply

Top Posters In This Topic

Hi, I have the same problem with th ebanners in my website.

I built it on a bedford template, the homepage gallery banner behaves rather wierdly on desktop vs mobile. I'd like the images to be fully displayed in both kind of screens. The images are 16:9 ratio.

with the options given by Squarespace I either have them badly cropped ù8depending on the screen width in pixels) or have them always fully displayed but wit padding above and below when on mobile and padding right and left when on screens with higher definition.

Is there a way to fix this via CSS?

website is www.spaceverbania.com

Link to comment
On 5/6/2022 at 12:25 AM, Matteo_Ale said:

Hi, I have the same problem with th ebanners in my website.

I built it on a bedford template, the homepage gallery banner behaves rather wierdly on desktop vs mobile. I'd like the images to be fully displayed in both kind of screens. The images are 16:9 ratio.

with the options given by Squarespace I either have them badly cropped ù8depending on the screen width in pixels) or have them always fully displayed but wit padding above and below when on mobile and padding right and left when on screens with higher definition.

Is there a way to fix this via CSS?

website is www.spaceverbania.com

You mean resize slideshow in top of homepage?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/7/2022 at 8:38 PM, andba said:

@tuanphan sorry, I hadn't seen this message until now.

have changed the pw to andytest.

Please have a look. thanks.

Andy

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.portfolio-hover[data-animation="fade"] .portfolio-hover-bg[data-active="true"] .portfolio-hover-bg-img {
    background-size: contain !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
7 hours ago, andba said:

@tuanphan

sure, here you go. you can see the difference in how the images appear via the screenshots.

project page link

I want the viewer to be able to see the entire image (close up and far away image of the bottle in this case) on both desktop and mobile. You can see that the mobile version crops out most of the information.

Thanks.

Screen Shot 2022-05-10 at 9.08.22 PM.png

Screen Shot 2022-05-10 at 9.08.40 PM.png

With Budweiser project, add to Design > Custom CSS
 

@media screen and (max-width:767px) {
body#item-618870aa167c7323ffdc66a6 article section {
    min-height: 30vh !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan

Not sure what you mean. Do I ALSO include your initial code that you sent the other day for the homepage? It appears that there's only one CSS input window, as opposed to different ones on different project pages (and this is a global issue, not just on one project).

If you do want me to add both lines of code, which order do they go in — and is there space or anything else between the lines?

Thanks.

Screen Shot 2022-05-11 at 9.15.07 PM.png

Link to comment
On 5/11/2022 at 7:46 PM, Matteo_Ale said:

Yes, that's what I mean.

The slideshow banners when on mobile are either cropped or resized (keeping the ratio) but with white bands above and below

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1632213720908_20940, div#block-yui_3_17_2_1_1632213720908_20940 div {
    height: 200px !important;
}}

 

On 5/12/2022 at 8:18 AM, andba said:

@tuanphan

Not sure what you mean. Do I ALSO include your initial code that you sent the other day for the homepage? It appears that there's only one CSS input window, as opposed to different ones on different project pages (and this is a global issue, not just on one project).

If you do want me to add both lines of code, which order do they go in — and is there space or anything else between the lines?

Thanks.

Screen Shot 2022-05-11 at 9.15.07 PM.png

Add code to Custom CSS (bottom of your screenshot)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
8 hours ago, andba said:

sorry @tuanphan I don't know if we're quite connecting here. I previously added the code you sent and it worked for one project but not all. I'm not sure this is the right path to take.

Do you have any other suggestions at all?

Thanks

You can add this code to Project Page Header

<style>
  @media screen and (max-width:767px) {
article section {
    min-height: 30vh !important;
}
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Is this in addition to, or instead of the code you supplied earlier?

And does it go into the same custom CSS section?

I'm having a hard time following your instructions, honestly. I have no coding experience, so can you please explain step-by-step exactly what you want me to do as if you were talking to somebody with no coding experience? A little tough to follow your instructions when there's not a lot of explanation around what you're suggesting I try.

Thank you.

Link to comment
15 hours ago, andba said:

Is this in addition to, or instead of the code you supplied earlier?

And does it go into the same custom CSS section?

I'm having a hard time following your instructions, honestly. I have no coding experience, so can you please explain step-by-step exactly what you want me to do as if you were talking to somebody with no coding experience? A little tough to follow your instructions when there's not a lot of explanation around what you're suggesting I try.

Thank you.

Hover Project Page on Pages > Main Navigation (or Not Linked) > Click Gear icon > Advanced > Add code on right box

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan can you please be more detailed. This is getting to be extremely frustrating.

WHICH code? The first line of code you sent? The second? Both?

PLEASE give me step-by-step instructions from beginning to end. Clearly you're trying to help a lot of people at once, which is great, but it's extremely difficult to use your instruction when it's always one vague sentence.

Link to comment
On 5/14/2022 at 11:23 AM, tuanphan said:
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1632213720908_20940, div#block-yui_3_17_2_1_1632213720908_20940 div {
    height: 200px !important;
}}

Thanks, this works perfectly on the homepage but I still have a problem in the "events" pages, I'd like to make sure even those images don't get cropped when on mobile, is there any specific code I could add to just evenbts?

Link to comment
1 hour ago, Matteo_Ale said:

Thanks, this works perfectly on the homepage but I still have a problem in the "events" pages, I'd like to make sure even those images don't get cropped when on mobile, is there any specific code I could add to just evenbts?

Can you share link to event page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.