ACScruggs Posted November 22, 2020 Share Posted November 22, 2020 @tuanphan I am trying to center the sunburst image located in the content block below the header (not in the footer) - aka the second content block below the header on the home page. Below the text that says ELEVATED. EMPOWERED. ECO-FASHION. Thank you for your help!! Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 On 11/23/2020 at 2:12 AM, ACScruggs said: @tuanphan I am trying to center the sunburst image located in the content block below the header (not in the footer) - aka the second content block below the header on the home page. Below the text that says ELEVATED. EMPOWERED. ECO-FASHION. Thank you for your help!! Hi. Do you still need help on this? 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
ACScruggs Posted December 4, 2020 Share Posted December 4, 2020 @tuanphan I resolved the issue! Thanks for your follow up. Link to comment
Guest Posted January 10, 2021 Share Posted January 10, 2021 Hello @tuanphan you helped me but i need more help.... i would like to change our homepage with symbols so user can get easily to our sites, but i have a problem, the symbols are to big for mobile view, so i tried your codes, and they work. But only the first symbol reacts to the changed width the other ones doesn´t I would like to have 2 symbols in a row on the mobile view like the picture of the desktop view attached. I am not a coder, so i tried my best. can you help me please? Site: finanzenverstehen.at/startseite-1 Pw: test1234 Thank you and sorry for my bad english. Link to comment
tuanphan Posted January 11, 2021 Share Posted January 11, 2021 On 1/10/2021 at 8:05 PM, philfv said: Hello @tuanphan you helped me but i need more help.... i would like to change our homepage with symbols so user can get easily to our sites, but i have a problem, the symbols are to big for mobile view, so i tried your codes, and they work. But only the first symbol reacts to the changed width the other ones doesn´t I would like to have 2 symbols in a row on the mobile view like the picture of the desktop view attached. I am not a coder, so i tried my best. can you help me please? Site: finanzenverstehen.at/startseite-1 Pw: test1234 Thank you and sorry for my bad english. Hi. Your current layout can't change to 2 items/row on mobile. You need to adjust a bit. Step 1. Try dragging Image Block 4 below Image Block 1 so that it appears a black line, width of line = width of Image Block 1 Do similar for Image Block 5, 6, 7 Step 2. Let me know. I will give the code on mobile. 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
Guest Posted January 12, 2021 Share Posted January 12, 2021 (edited) 11 hours ago, tuanphan said: Hi. Your current layout can't change to 2 items/row on mobile. You need to adjust a bit. Step 1. Try dragging Image Block 4 below Image Block 1 so that it appears a black line, width of line = width of Image Block 1 Do similar for Image Block 5, 6, 7 Step 2. Let me know. I will give the code on mobile. Ok i think i did it. I dragged the images 4, 5 , 6 below the other ones and they took the width of it. Thx. Edited January 12, 2021 by philfv Link to comment
tuanphan Posted January 13, 2021 Share Posted January 13, 2021 23 hours ago, philfv said: Ok i think i did it. I dragged the images 4, 5 , 6 below the other ones and they took the width of it. Thx. Add to Custom CSS /* 2 images/row */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1610231497033_26238+.row>.span-2:nth-child(n+2)>div { width: 50%; float: left !important; padding: 0 !important; clear: none; } } 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
Guest Posted January 13, 2021 Share Posted January 13, 2021 1 hour ago, tuanphan said: Add to Custom CSS /* 2 images/row */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1610231497033_26238+.row>.span-2:nth-child(n+2)>div { width: 50%; float: left !important; padding: 0 !important; clear: none; } } Thank you very much!!!! You are an absolutely nice guy! Greetings from cold and snowy Austria. Link to comment
TI-Group Posted January 13, 2021 Share Posted January 13, 2021 Hello @tuanphan Could I please also get your help? I'm trying to add custom css so that when viewed on mobile the whole image opening image displays (at present it cuts off the two outside people, I have tried with everyone's suggestions above with no luck. This is a link to the site - https://lion-toucan-jd9l.squarespace.com It's for the opening image underneath the logo and first 2 paragraphs. Thanks :) Link to comment
Imanixyz Posted January 14, 2021 Share Posted January 14, 2021 On 11/15/2019 at 3:19 PM, lu.diehl said: 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. Hi, this worked for me but my image is not all the way to the left, is there a way to center it? Thank you in advance for your help! Link to comment
tuanphan Posted January 17, 2021 Share Posted January 17, 2021 On 1/13/2021 at 11:25 PM, TI-Group said: Hello @tuanphan Could I please also get your help? I'm trying to add custom css so that when viewed on mobile the whole image opening image displays (at present it cuts off the two outside people, I have tried with everyone's suggestions above with no luck. This is a link to the site - https://lion-toucan-jd9l.squarespace.com It's for the opening image underneath the logo and first 2 paragraphs. Thanks :) Remove this code .homepage .section-background img { width: 100% !important; height: auto !important; } Add this new code @media screen and (max-width: 767px) { .homepage #page section:nth-child(2) { min-height: 30vh !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
tuanphan Posted January 17, 2021 Share Posted January 17, 2021 On 1/14/2021 at 11:36 PM, Imanixyz said: Hi, this worked for me but my image is not all the way to the left, is there a way to center it? Thank you in advance for your help! Can you share site url? We can check easier 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
TI-Group Posted January 17, 2021 Share Posted January 17, 2021 3 hours ago, tuanphan said: Remove this code .homepage .section-background img { width: 100% !important; height: auto !important; } Add this new code @media screen and (max-width: 767px) { .homepage #page section:nth-child(2) { min-height: 30vh !important; } } It worked! Thank you so much 😄 Link to comment
Erlend-fs Posted January 22, 2021 Share Posted January 22, 2021 Hello! I would like to control the logo size in the footer. In desktop, it displays correct (I've added spacer blocks on both sides of the logo). On mobile and tablet, it displays way to large. I've tried this CCS code, but can't get it to work: /* 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%; } } Could it be because this is in the footer? Website: https://spinach-keyboard-w7ws.squarespace.com/ PW: hoyden2021 Thanks in advance -------------- In desktop, the logo displays correct: In mobile, it displays too large: Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 Add to Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1611311458556_32109 { width: 50% !important; margin: 0 auto; } } Erlend-fs 1 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
CillianS Posted January 24, 2021 Share Posted January 24, 2021 On 7/12/2020 at 11:32 PM, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:640px) { figure#yui_3_17_2_1_1594589428149_66 a { padding: 5px 10px; font-size: 10px !important; } } Hi @tuanphan, I tried using this code and replacing the 'target' with the block id on my own website, but I must have gotten it wrong as nothing happens. I would like to do two things - put the site title all on one line in mobile, and make the two buttons smaller and also horizontally next to each other. Site URL: molliekeane.com Thank you! Link to comment
Erlend-fs Posted January 26, 2021 Share Posted January 26, 2021 Thank you so much tuanphan. Works great! Link to comment
Guest Posted January 31, 2021 Share Posted January 31, 2021 On 1/13/2021 at 10:36 AM, tuanphan said: Add to Custom CSS /* 2 images/row */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1610231497033_26238+.row>.span-2:nth-child(n+2)>div { width: 50%; float: left !important; padding: 0 !important; clear: none; } } Hey @tuanphan i noticed a problem, on android smartphones, do you know what the problem is? Look at the attached Pic. On iOS Devices the size is absolute perfect but on android it isn´t. Thank you, again! Link to comment
tuanphan Posted February 1, 2021 Share Posted February 1, 2021 On 1/24/2021 at 7:13 AM, CillianS said: Hi @tuanphan, I tried using this code and replacing the 'target' with the block id on my own website, but I must have gotten it wrong as nothing happens. I would like to do two things - put the site title all on one line in mobile, and make the two buttons smaller and also horizontally next to each other. Site URL: molliekeane.com Thank you! It looks like you solved Site Title, however, if you check on iPhone 5, site title still 2 lines. Add this new code /* site title one line */ @media screen and (max-width:767px) { a#site-title { font-size: 40px; white-space: nowrap !important; } } With buttons, where is button? I don't see it on homepage 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
tuanphan Posted February 1, 2021 Share Posted February 1, 2021 7 hours ago, philfv said: Hey @tuanphan i noticed a problem, on android smartphones, do you know what the problem is? Look at the attached Pic. On iOS Devices the size is absolute perfect but on android it isn´t. Thank you, again! Try new code /* 2 images/row */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1610231497033_26238+.row>.span-2:nth-child(n+2)>div { width: 50%; float: left !important; padding: 0 !important; clear: none; } div#block-yui_3_17_2_1_1610231497033_26238+.row>.span-2:nth-child(n+2)>div:nth-child(3n+1) { clear: left !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
Jamiepeterhugh Posted February 3, 2021 Share Posted February 3, 2021 Hi all...really useful tips here for Brine users. Thanks. Is there anyone out there who can tell me how i can align the bottom 2 text blocks here in tablet view? www.jamieclarkimages.co.uk ..... Any help gratefully received.....:) Link to comment
tuanphan Posted February 4, 2021 Share Posted February 4, 2021 On 2/3/2021 at 7:28 PM, Jamiepeterhugh said: Hi all...really useful tips here for Brine users. Thanks. Is there anyone out there who can tell me how i can align the bottom 2 text blocks here in tablet view? www.jamieclarkimages.co.uk ..... Any help gratefully received.....:) Can you share link to page in screenshot? We can check easier 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
MichaelCaz Posted February 8, 2021 Share Posted February 8, 2021 Hello, I'm having a similar issue and am trying to make the banner background image show the full width of the image on mobile. You can access my site here: parkwoodproper.com PW: treva Can someone help? Thanks in advance! Link to comment
MichaelCaz Posted February 8, 2021 Share Posted February 8, 2021 7 minutes ago, EditionStudios said: Hello, I'm having a similar issue and am trying to make the banner background image show the full width of the image on mobile. You can access my site here: parkwoodproper.com PW: treva Can someone help? Thanks in advance! I tried using this code but then it adds blank space under the photo @media screen and (max-width:640px) { .homepage .section-background img { width: 100% !important; height: auto !important; } } Link to comment
MichaelCaz Posted February 8, 2021 Share Posted February 8, 2021 Updated -- this code seemed to work, but I'm having the same issue with a photo lower in the page /* Tablet */ @media screen and (max-width:991px) { body.homepage #page section:first-child { min-height: 40vh !important; } } /* mobile */ @media screen and (max-width:767px) { body.homepage #page section:first-child { min-height: 20vh !important; } } 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