Images cropped on mobile

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?

Hi,

What is access password?

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

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?

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

have changed the pw to andytest.

Please have a look. thanks.

Andy

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

@tuanphan

It seems to have helped on the homepage, but once you click into a project the issue is not solved.

5 hours ago, andba said:

@tuanphan

It seems to have helped on the homepage, but once you click into a project the issue is not solved.

Can you take a screenshot of an image on project & link to a project?

@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.

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.

With Budweiser project, add to Design > Custom CSS
 

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

On 5/7/2022 at 2:58 PM, tuanphan said:

You mean resize slideshow in top of homepage?

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

@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.

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.

Add code to Custom CSS (bottom of your screenshot)

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

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>

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.

@tuanphan see above, forgot to tag you! Thanks.

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

@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.

On 5/15/2022 at 9:36 AM, tuanphan said:

You can add this code to Project Page Header

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

 

This code

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?

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?

On 5/23/2022 at 10:37 AM, tuanphan said:

Can you share link to event page?

www.spaceverbania.com/events

On 6/3/2022 at 3:52 PM, Matteo_Ale said:

www.spaceverbania.com/events

Thank you. Can you check image? It show blank image now

https://spaceverbania.com/events

20 minutes ago, tuanphan said:

Thank you. Can you check image? It show blank image now

https://spaceverbania.com/events

I noticed it does but the image is loaded, there must be something wrong with the way it should be displayed and I can't manage to understand what...