Resize image & banner for mobile only

@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

Thank you very much for your kind help @tuanphan ! 

Take care 

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

 

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

54 minutes ago, juliahodgins said:

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

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

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!

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.

6 hours ago, tuanphan said:

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

Thanks @tuanphan I've duplicated now 🙂

1 hour ago, juliahodgins said:

Thanks @tuanphan I've duplicated now 🙂

top banner for mobile or desktop?

3 hours ago, tuanphan said:

top banner for mobile or desktop?

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

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

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! 

20 minutes ago, juliahodgins said:

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

THANK YOU! YOU ARE AMAZING! 

min-width: 641px = desktop + tablet

31 minutes ago, tuanphan said:

min-width: 641px = desktop + tablet

where do I out that in the code? 

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

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!

On 11/13/2020 at 10:04 AM, juliahodgins said:

you are amazing, thank you so very much!

Hi. I see on tablet Buttons: More Info, Learn More not align.

Do you want to fix this?