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:

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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? Do i need to send my URL as well? 

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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

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

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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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