stur Posted April 6, 2022 Share Posted April 6, 2022 (edited) 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 April 6, 2022 by stur Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 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
stur Posted April 12, 2022 Author Share Posted April 12, 2022 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
tuanphan Posted April 18, 2022 Share Posted April 18, 2022 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
SandraC Posted October 1, 2022 Share Posted October 1, 2022 How would you do this to just change one banner but not all banners on an index? Link to comment
tuanphan Posted October 2, 2022 Share Posted October 2, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment