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

@tuanphan

Hi Tuan, I was hoping you are also able to help me with resizing section media to mobile. I've tried inserting the codes you provided for others in this thread but doesn't seem to work. 

my website is www.roughandrose.co and its the "spotlight-post" section as pictured below.

Thanks in advance! 

Julia

 

Screen Shot 2020-11-08 at 10.52.19 AM.png

Link to post
  • 0
On 11/8/2020 at 10:53 AM, juliahodgins said:

@tuanphan

Hi Tuan, I was hoping you are also able to help me with resizing section media to mobile. I've tried inserting the codes you provided for others in this thread but doesn't seem to work. 

my website is www.roughandrose.co and its the "spotlight-post" section as pictured below.

Thanks in advance! 

Julia

 

Screen Shot 2020-11-08 at 10.52.19 AM.png

@tuanphan Hi Tuan was wondering if you are able to help with this? Much appreciated.

Link to post
  • 0
6 minutes ago, tuanphan said:

You can add 2 sections: I can give the code to hide 1 on desktop, hide 1 on mobile

@tuanphan 

so duplicate the section and add unique CSS code to each section? 

yes please, if you can prepare the code that would be amazing thank you!

Link to post
  • 0
4 hours ago, juliahodgins said:

@tuanphan 

so duplicate the section and add unique CSS code to each section? 

yes please, if you can prepare the code that would be amazing thank you!

You can sections first, I can't give code without checking section.

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

--- Happy New Year

Link to post
  • 0
28 minutes ago, juliahodgins said:

top banner for desktop and bottom banner for mobile, thank you!

Add to Home > Design > Custom CSS

/* Hide bottom banner on desktop */
@media screen and (min-width:641px) {
section#spotlight-post-1 {
    display: none;
}
}
/* Hide top banner on mobile */
@media screen and (max-width:640px) {
section#spotlight-post {
display: none;
}
}

 

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

--- Happy New Year

Link to post
  • 0
14 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


/* Hide bottom banner on desktop */
@media screen and (min-width:641px) {
section#spotlight-post-1 {
    display: none;
}
}
/* Hide top banner on mobile */
@media screen and (max-width:640px) {
section#spotlight-post {
display: none;
}
}

 

are you able to kindly include a coding for  the bottom banner to show on tablet as well? 

THANK YOU! YOU ARE AMAZING! 

Link to post
  • 0
On 11/10/2020 at 11:03 AM, juliahodgins said:

where do I out that in the code? 

Try this

/* Hide bottom banner on desktop */
@media screen and (min-width:901px) {
section#spotlight-post-1 {
    display: none;
}
}
/* Hide top banner on mobile */
@media screen and (max-width:900px) {
section#spotlight-post {
display: none;
}
}

 

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

--- Happy New Year

Link to post
  • 0
On 11/11/2020 at 9:58 PM, tuanphan said:

Try this


/* Hide bottom banner on desktop */
@media screen and (min-width:901px) {
section#spotlight-post-1 {
    display: none;
}
}
/* Hide top banner on mobile */
@media screen and (max-width:900px) {
section#spotlight-post {
display: none;
}
}

 

you are amazing, thank you so very much!

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