Resize image & banner for mobile only

Hello Everyone, 

I have no real experience coding and I want to ensure the image seen on the desktop view is roughly the same size on mobile. How can I do this?

@NorthernGoose Can you share link to your site?

I also have this question. Image on mobile appears pixelated as well.

5 minutes ago, McKenzieDesign said:

I also have this question. Image on mobile appears pixelated as well.

 

 

Can you share link to your site?

https://mckenzieadkinsdesign.squarespace.com

2 minutes ago, McKenzieDesign said:

https://mckenzieadkinsdesign.squarespace.com

You want to reduce image width?

Your site is private. Please setup password & share url. View my signature if you dont know how to.

Yes. I want the image to remain proportional when viewed on mobile, instead of expanding to the width of the mobile screen. Another example on the Contact page.

https://mckenzieadkinsdesign.squarespace.com

pw: password123

5 minutes ago, McKenzieDesign said:

Yes. I want the image to remain proportional when viewed on mobile, instead of expanding to the width of the mobile screen. Another example on the Contact page.

https://mckenzieadkinsdesign.squarespace.com

pw: password123

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1576512899628_6107 .image-block-wrapper img {
    max-width: 50%;
    height: auto !important;
}
}

Is there a way to do the same for the graphic on the Contact pages?

Also, I would like to keep it centered. Thanks.

@tuanphan

Any help on this would be appreciated! Thanks

18 minutes ago, McKenzieDesign said:

Any help on this would be appreciated! Thanks

Remove the code I sent yesterday. And add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* Image contact page */
div#block-yui_3_17_2_1_1576514450944_4918 .image-block-wrapper {
    max-width: 50%;
    margin: 0 auto;
}
div#block-yui_3_17_2_1_1576514450944_4918 .image-block-wrapper img {
    height: auto !important;
}
/* Image Footer */
div#block-yui_3_17_2_1_1576512899628_6107 .image-block-wrapper {
    max-width: 50%;
    margin: 0 auto;
}
div#block-yui_3_17_2_1_1576512899628_6107 .image-block-wrapper img {
    height: auto !important;
}

}

Hi. This actually didn't work (viewed in Chrome on an iPhone).

Any help on this would be appreciated! Thanks

Thanks for the help.

I also have this question for my site. I have a headline banner and it doesn't adjust the size to fit on mobile. How do I accomplish this? Do i need to send my URL as well? 

18 hours ago, ForwardMile said:

I also have this question for my site. I have a headline banner and it doesn't adjust the size to fit on mobile. How do I accomplish this? Do i need to send my URL as well? 

If you share site url, we can check easier.

5 hours ago, tuanphan said:

If you share site url, we can check easier.

Forwardmile.co

On 8/11/2020 at 2:44 AM, ForwardMile said:

Forwardmile.co

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 35vh;
}
}

7 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 35vh;
}
}

 

THANK YOU!

On 8/12/2020 at 6:07 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 35vh;
}
}

 

Hi, @tuanphan  I need help with my mobile banner. its cropping on mobile. please help.

here's the url:

Patientorator.com

Thanks in advance! 

17 hours ago, Asiya said:

Hi, @tuanphan  I need help with my mobile banner. its cropping on mobile. please help.

here's the url:

Patientorator.com

Thanks in advance! 

Look fine here. Did you solve?

3 hours ago, tuanphan said:

Look fine here. Did you solve?

Yes I did, Thank you so much 

17 hours ago, hboss22 said:

I also have this question for my site. I have a headline banner and it doesn't adjust the size to fit on mobile. How do I accomplish this? My url is fromyourmuse.com and I'm trying to fix the image on my About page

 

Hi. Which banner? Can you take a screenshot? We can check easier.

Site URL: https://bad-obsession.com

Hi @tuanphan

I hope you're doing alright 

I have gone through your coding advice to other people in this thread and tried to insert custom CSS on my site www.bad-obsession.com (code: bibi007) so that the height of the homepage banner image (with the guy and the girl) on mobile devices is different from the height on desktop.

For your information I'm in the middle of my 14 days trial period.

Here is the code I tried to insert and did not work :

@media screen and (max-width:640px) {

[data-parallax-id="5f852269ae879c7bde5e19a2"] .section-background img {

    height: 40vh;

}

}

Thank you in advance for your kind help

toniohb