Jump to content

Banner Image Won't Resize for Mobile View

Recommended Posts

  • Replies 8
  • Views 589
  • Created
  • Last Reply

Top Posters In This Topic

12 hours ago, Anastasiia said:

Site URL: https://www.anastasiidesign.com

Hi @tuanphan could you please help me with resizing my banner? All banners at the pages look like this on the phone. Thank you in advance!

Here is link https://www.anastasiidesign.com/about

IMG_3715.PNG

Add to Design > Custom CSS

/* resize mobile banners */
@media screen and (max-width:640px) {
.page-banner-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.page-banner-wrapper {
    height: 250px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
1 hour ago, Anastasiia said:

Hi @tuanphan! May I also ask one more question, so when I am at my project page and scroll to the bottom I see that my text of the description overlay the image and it is terrible. But since I am using a template I cannot figure out how to change it. 

Thank you!!!!

image.png

You want to remove it, add an overlay, reduce size or?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I want to have this red text on a main page but I don't want it there when i scroll to the bottom of the project page and it overlay on the banner, not sure if I explained it good enough. So basically if you go to any project page scroll it to the bottom you will see that picture I attached, but I want my homepage on a bottom of the project page. It automatically appears by scrolling to the very bottom

Link to comment
On 4/13/2022 at 3:05 AM, Anastasiia said:

I want to have this red text on a main page but I don't want it there when i scroll to the bottom of the project page and it overlay on the banner, not sure if I explained it good enough. So basically if you go to any project page scroll it to the bottom you will see that picture I attached, but I want my homepage on a bottom of the project page. It automatically appears by scrolling to the very bottom

Hi,

And what you want is remove red text only on bottom of project page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
On 3/24/2022 at 7:39 PM, tuanphan said:

Add to Design > Custom CSS

/* resize mobile banners */
@media screen and (max-width:640px) {
.page-banner-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.page-banner-wrapper {
    height: 250px !important;
}
}

 

Nope this doesn't work 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.