doshea Posted November 15, 2019 Share Posted November 15, 2019 Hi, I am using the brine template... I want to target and control the size of a specific image when changing between desktop, tablet and mobile. The image is the logo 'tbk' and sits within a banner at the bottom of a page. The size of the logo is perfect when in desktop mode, too small in tablet mode and too large on mobile. Is there some custom CSS i can add that will allow me to control the sizes for each. See images attached. website: tbktest.squarespace.com Thanks in advance. Dan. Link to comment
Graemetg Posted November 15, 2019 Share Posted November 15, 2019 Hello, One initial thought - as the logo is just text does it need to be an image? Might be worth trying to include as normal text and add a style so that it picks up the same font? Link to comment
lu.diehl Posted November 15, 2019 Share Posted November 15, 2019 (edited) Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below: /* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { #block-unique-ID{ width: 100%; } } Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed. Edited November 18, 2019 by lu.diehl tweaked answer Graemetg, SodaCreekDigital, amberwavescreative and 3 others 5 1 Link to comment
Graemetg Posted November 18, 2019 Share Posted November 18, 2019 Hi @lu.diehl thanks for your answer, very useful and should work I think. It's not for me though, I answered the original question - I was just wondering if @doshea could use text instead of an image for the logo, in particular in the footer. doshea and lu.diehl 2 Link to comment
lu.diehl Posted November 18, 2019 Share Posted November 18, 2019 6 minutes ago, Graemetg said: Hi @lu.diehl thanks for your answer, very useful and should work I think. It's not for me though, I answered the original question - I was just wondering if @doshea could use text instead of an image for the logo, in particular in the footer. Hi! Thanks for pointing it out! 🙂 Link to comment
doshea Posted November 19, 2019 Author Share Posted November 19, 2019 Hi, thank you both for your support. In the end i took Graemetg's adive and change the logo to text rather than an image. Graemetg and lu.diehl 2 Link to comment
New_Designer Posted November 19, 2019 Share Posted November 19, 2019 Hi, I am using the brine template and also trying to reduce the size of certain images when viewed on mobile, but can't seem to get the syntax correct. It is also possible that I am not using the right image block ID. Any help would be very much appreciated. I have tried many variations on the code, but can't seem to get anything to work: First Try, didn't work: /* mobile screens */ @media only screen and (max-width: 640px) { 5dd1fbc83f951311698a969f{ width: 20%; } } Note that I also tried it with # in front of the image ID. Second Try, also didn't work /* mobile screens */ @media only screen and (max-width: 640px) { [data-image-id="5dd1fbc83f951311698a969f"]{ width: 20%; } } I have been using inspect to find the image ID, but I can be doing that incorrectly. I am pulling the id from where it says: data-image-id="5dd1fbc83f951311698a969f" Any guidance would be appreciated. Thanks. Link to comment
lu.diehl Posted November 20, 2019 Share Posted November 20, 2019 @New_Designer try looking for the image block ID. The block ID starts with "block-" followed by a set of numbers, for example: id="block-5a6263c01ea450cffcf0" as shown in the image attached. If you need further help, please share a link to your website 😉 If you use the Google Chrome browser there is this really helpful extension called the Squarespace Collection/Block Identifier which saves me time identifying any block ID in Squarespace. It shows the Squarespace page collection ID and permanent block IDs when you enable it. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde Link to comment
New_Designer Posted November 20, 2019 Share Posted November 20, 2019 Hi @lu.diehl, Thanks so much for your help. I really appreciate it. I was able to solve my problem and the Squarespace Collection/Block Identifier was a real time saver and help. Thanks again. lu.diehl 1 Link to comment
Guest Posted May 20, 2020 Share Posted May 20, 2020 Hello @lu.diehl I'm having the same problem: Is this correct? /* mobile screens */ @media only screen and (max-width: 640px) { block-yui_3_17_2_1_1589388698979_4393{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { block-yui_3_17_2_1_1589388698979_4393{ width: 100%; } } Thank you. Link to comment
tuanphan Posted May 21, 2020 Share Posted May 21, 2020 19 hours ago, odyssey said: Hello @lu.diehl I'm having the same problem: Is this correct? /* mobile screens */ @media only screen and (max-width: 640px) { block-yui_3_17_2_1_1589388698979_4393{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { block-yui_3_17_2_1_1589388698979_4393{ width: 100%; } } Thank you. If you share link to your site, I can take a look 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
Guest Posted May 21, 2020 Share Posted May 21, 2020 Hello! Link is: https://octahedron-beagle-3pyn.squarespace.com/ Password is: password Link to comment
Guest Posted May 22, 2020 Share Posted May 22, 2020 Hello!Link is: https://octahedron-beagle-3pyn.squarespace.com/Password is: password Link to comment
tuanphan Posted May 22, 2020 Share Posted May 22, 2020 1 hour ago, odyssey said: Hello!Link is: https://octahedron-beagle-3pyn.squarespace.com/Password is: password Which image? 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
Guest Posted May 22, 2020 Share Posted May 22, 2020 Sorry!! The logo in the top banner. Link to comment
JonathanFussell Posted May 29, 2020 Share Posted May 29, 2020 I am also having this issue. Tried using the below code, is this right? /* mobile screens */ @media only screen and (max-width: 640px) { #block-yui_3_17_2_1_1587744734128_191413{ width: 50%; } } /* tablet screens */ @media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1587744734128_191413{ width: 100%; } } Website link is https://jonkasbe.com/when-lambs-become-lions/. Trying to get the Apple TV, Google Play, Amazon, etc. logos to not show up full screen on mobile and to stay small and in a line like it does on the computer. Thanks in advance for any advice! Link to comment
tuanphan Posted May 30, 2020 Share Posted May 30, 2020 14 hours ago, JonathanFussell said: Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#page-5e9bd997f493453494ba09be .span-12 .row:nth-child(8)>.col { width: 25% !important; float: left !important; } } JonathanFussell 1 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
Daguerrotipo Posted May 30, 2020 Share Posted May 30, 2020 Hi! I'm having a similar issue. I've tried various CSS codes but they don't work. The page is https://www.clinicaarriaga.com/servicios-2 If anyone could help I would be very grateful. Thank you so much. Link to comment
JonathanFussell Posted May 30, 2020 Share Posted May 30, 2020 15 hours ago, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#page-5e9bd997f493453494ba09be .span-12 .row:nth-child(8)>.col { width: 25% !important; float: left !important; } } Thank you! This worked! Really appreciate the support. Is it possible to apply similar code to the homepage roll over titles so they fit within the images? On jonkasbe.com homepage, you’ll notice that when you role over the images on mobile and see the titles come up for “When Lambs Become Lions”, “A Beautiful Waste”, or “Mipso In Japan” they do not fit within the image (on mobile - image attached to show the issue). Any advice in this area is much appreciated! Thank you. Link to comment
tuanphan Posted May 31, 2020 Share Posted May 31, 2020 17 hours ago, Daguerrotipo said: Hi! I'm having a similar issue. I've tried various CSS codes but they don't work. The page is https://www.clinicaarriaga.com/servicios-2 If anyone could help I would be very grateful. Thank you so much. What is your problem? 10 hours ago, JonathanFussell said: Thank you! This worked! Really appreciate the support. Is it possible to apply similar code to the homepage roll over titles so they fit within the images? On jonkasbe.com homepage, you’ll notice that when you role over the images on mobile and see the titles come up for “When Lambs Become Lions”, “A Beautiful Waste”, or “Mipso In Japan” they do not fit within the image (on mobile - image attached to show the issue). Any advice in this area is much appreciated! Thank you. Add to Home > Design > Custom CSS @media screen and (max-width:640px) { .homepage .project-title { font-size: 16px !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
JonathanFussell Posted May 31, 2020 Share Posted May 31, 2020 8 hours ago, tuanphan said: @media screen and (max-width:640px) { .homepage .project-title { font-size: 16px !important; } } thanks! It worked for some of them, but for "When Lambs Become Lions" the issue is still there, image attached. Any thoughts? Thanks again. Link to comment
Daguerrotipo Posted June 8, 2020 Share Posted June 8, 2020 On 5/31/2020 at 4:46 AM, tuanphan said: What is your problem? Hi sorry for the delay. I want the icons you see here to keep that same layout when you visit the page on mobile or a small screen. I have tried different options but nothing works. Could you give me a hand? Thank you so much. Link to comment
tuanphan Posted June 8, 2020 Share Posted June 8, 2020 8 hours ago, Daguerrotipo said: Hi sorry for the delay. I want the icons you see here to keep that same layout when you visit the page on mobile or a small screen. I have tried different options but nothing works. Could you give me a hand? Thank you so much. I answered in another post 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
shykoala4 Posted July 7, 2020 Share Posted July 7, 2020 (edited) Hello! Issue: I want to target and control the logo size when changing between desktop and mobile. Template: Brine (Sonny) Image: The logo "Befriended Heart" at the top left of my page. The logo size is perfect when in desktop and tablet modes, but too small on mobile. See images attached. Question: Can you help me make the logo bigger for mobile? Ideally the same proportion as it appears for desktop below. *Note that I've already tried multiple media rules codes in my CSS and they haven't made a difference 😞 * Website: joyindementia.com Thank you for your help! Laura DESKTOP IMAGE MOBILE IMAGE Edited July 7, 2020 by shykoala4 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