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

Resize image & banner for mobile only


NorthernGoose

Question

  • Answers 41
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Remove above code, then add this to Home > Design > Custom CSS /* resize mobile home banner */ @media screen and (max-width:640px) { section#home figure img { width: 100% !important;

Posted Images

Recommended Posts

  • 0
5 minutes ago, McKenzieDesign said:

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

 

 

Can you share link to your site?

Link to post
  • 0
2 minutes ago, McKenzieDesign said:

You want to reduce image width?

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

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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;
}

}

 

Link to post
  • 0
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.

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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! 

Link to post
  • 0
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?

Link to post
  • 0

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

 
Link to post
  • 0
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.

Link to post
  • 0

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

Link to post
  • 0
On 11/5/2020 at 2:40 AM, toniohb said:

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

Remove above code, then add this to Home > Design > Custom CSS

/* resize mobile home banner */
@media screen and (max-width:640px) {
section#home figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#home {
    min-height: 165px !important;
}
}

 

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