Jump to content

Changing banner size for mobile use

Recommended Posts

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

Hi I am currently creating a website for my workplace, I have almost finished the site but unfortunately I am having trouble with the website banners in tablet and mobile view.

I was hoping that someone would be able to help me with a custom code to make the banner fit in mobile and tablet, I would also like the banner images to be displayed in portrait.

Edit - I have added two images of how I would like the banners to appear in mobile view, if you can help me achieve this it would be much appreciated

Thank you in advance.

944260176_Websitebannerimageforum.thumb.jpg.1ac676ff7d59de0fc19ca52eac52ea71.jpg

465709911_webistebannerimageforum-01.thumb.jpg.aa9874641d2feca3298ad8e8b6352dc0.jpg

Edited by Slawsonwill
Link to comment
  • Replies 13
  • Views 527
  • Created
  • Last Reply

Top Posters In This Topic

Hi. Add to Design > Custom CSS > Then save & reload your site

/* Mobile-Homepage-Resize banners */
@media screen and (max-width:640px) {
body.homepage .Parallax-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
section#about-intro {
    min-height: unset !important;
    height: 200px;
}
/* top banner text */
section#about-intro * {
    font-size: 38px;
}
section#about-quote-mojave {
    min-height: unset !important;
    height: 200px;
}
/* bottom banner text */
section#about-quote-mojave * {
    font-size: 20px;
}
}

 

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

That's great thank you for your help

Would we be able to alter the code for it to appear like the images I have posted above please?

I have edited the original post and added two images to show how I would like the banners to be displayed, please let me know if you can help

Thank you in advance

Link to comment
On 7/8/2021 at 9:43 PM, Slawsonwill said:

That's great thank you for your help

Would we be able to alter the code for it to appear like the images I have posted above please?

I have edited the original post and added two images to show how I would like the banners to be displayed, please let me know if you can help

Thank you in advance

Hi. I don't see image in your post? Can you check it again?

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

Sorry for the confusion, the images didn't upload.

I have posted them in the this reply.

Thank you for your continued help.

 

1376156531_Websitebannerimageforum.thumb.jpg.1a03d5cea8d7118a781ed789850349ea.jpg

 

747596171_webistebannerimageforum-01.thumb.jpg.c450e1e5fd97ced72d9003a239f91282.jpg

Edited by Slawsonwill
Link to comment
22 hours ago, Slawsonwill said:

Sorry for the confusion, the images didn't upload.

I have posted them in the this reply.

Thank you for your continued help.

 

1376156531_Websitebannerimageforum.thumb.jpg.1a03d5cea8d7118a781ed789850349ea.jpg

 

747596171_webistebannerimageforum-01.thumb.jpg.c450e1e5fd97ced72d9003a239f91282.jpg

You mean move the position of the car in the pictures?

 

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

Also, some other problems/

(Mobile – Services) Word break. In desktop/Tablet don’t have minus between letters.

https://www.roydenniessigns.com/services

roydenniessigns.com-03-min.png

4. (Mobile – Gallery)Word is cut off

https://www.roydenniessigns.com/work-gallery

roydenniessigns.com-04-min.png

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
On 7/27/2021 at 5:18 PM, Slawsonwill said:

I have made the website public again the url is:

https://www.roydenniessigns.com/

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .Parallax-item img {
    left: 0px !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

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.