Jump to content

Bedford template - Change size of the banner

Recommended Posts

Hi

I have used the below custom code to change the banner size on the bedford template so it displays nicely on a ipad screen. However this also effects a pc with the display resolution size 1024X 768 is there any code I could use so it would just effect a ipad screen and not a pc screen?

Thanks in advance for any help given.

 

/* tablet top banner changing size to display better on tablets */
@media screen and (max-width:1112px) and (min-width:769px) {
figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.banner-thumbnail-wrapper.has-description {
    height: 180px !important;
}
}

Edited by stur
Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

try this

/* tablet top banner changing size to display better on tablets */
@media screen and (max-width:900px) and (min-width:641px) {
figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.banner-thumbnail-wrapper.has-description {
    height: 180px !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks for the replay that works however when on a ipad (landscape mode) the banner is very large is they any code that would sort that? Appreciate your help.

Code currently used is below

/* tablet top banner changing size to display better on tablets */
@media screen and (max-width:900px) and (min-width:641px) {
figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.banner-thumbnail-wrapper.has-description {
    height: 180px !important;
}
}
/* Mobile banner image hanging size to display better on mobiles */
@media screen and (max-width:767px) {
    figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.banner-thumbnail-wrapper.has-description {
    height: 0px !important;
}
}

Link to comment

With landscape mode, you can add this query

/* tablet top banner changing size to display better on tablets */
@media screen and (max-width:900px) and (min-width:641px) and (orientation:landscape) {
figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.banner-thumbnail-wrapper.has-description {
    height: 180px !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
On 10/1/2022 at 8:18 AM, SandraC said:

How would you do this to just change one banner but not all banners on an index?

Which banner are you referring to? Then we can check its code

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.