stephanie25 Posted August 18, 2019 Share Posted August 18, 2019 (edited) I have a vertical line in my text to break it up. It looks fine on desktop but on mobile the line breaks right after the vertical line. I'd like to get rid of the vertical line just for mobile. Is there way to completely change the text from desktop to mobile view? I'm using the brine family template. https://www.stephanieausfresser.com/ On desktop it looks this:UX/UI Designer | Graphic Designer On mobile it look like this:UX/UI Designer |Graphic Designer Instead, on mobile I would like it to look like this without the vertical line:UX/UI DesignerGraphic Designer Thanks Edited August 18, 2019 by stephanie25 Initial Revision Link to comment
tuanphan Posted August 18, 2019 Share Posted August 18, 2019 (edited) @stephanie25 You can're remove "|" There are some methods you can use Add 2 Text "UX/UI Designer | Graphic Designer", 1 show on desktop (hide mobile) and 1 show on mobile (hide desktop). I can send CSS to do it. You just add 2 text Decrease/Increase font size of UX/..... on Mobile You can wrap "|" in span tag, and then use CSS to remove "|" on mobile You want? :-D UX/UI Designer <span class="kl-verline">|</span> Graphic Designer Edited August 18, 2019 by tuanphan 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
stephanie25 Posted August 19, 2019 Author Share Posted August 19, 2019 @tuanphan Thanks! Adding two texts was a great suggestion. For anyone who needs the code I provided it below: <html> <head> <style> h2 {text-align:center; font-weight: bold;} #content-desktop {display: block;} #content-mobile {display: none;} @media screen and (max-width: 768px) { #content-desktop {display: none;} #content-mobile {display: block;} } } </style> </head> <body> <div id="content-desktop"> <h2>UX/UI DESIGNER | GRAPHIC DESIGNER</h2> </div> <div id="content-mobile"> <h2>UX/UI DESIGNER<br />GRAPHIC DESIGNER</h2> </div> </body> </html> melissagaviria 1 Link to comment
Votisent Posted August 27, 2019 Share Posted August 27, 2019 You can try changing the size of indentation between blocks for mobile, adjusting the block visibility range on different devices, making your own adaptive version using the Zero Block editor, or disabling the website’s responsiveness. Link to comment
Sherman Posted January 26, 2021 Share Posted January 26, 2021 Hi, i actually tried using this code but it doesn't work. Anybody know whats wrong or is able to provide me with the right code: Site: https://joshyeoh.squarespace.com/ Password: 1234 On 8/19/2019 at 8:10 AM, stephanie25 said: @tuanphan Thanks! Adding two texts was a great suggestion. For anyone who needs the code I provided it below: <html> <head> <style> h2 {text-align:center; font-weight: bold;} #content-desktop {display: block;} #content-mobile {display: none;} @media screen and (max-width: 768px) { #content-desktop {display: none;} #content-mobile {display: block;} } } </style> </head> <body> <div id="content-desktop"> <h2>UX/UI DESIGNER | GRAPHIC DESIGNER</h2> </div> <div id="content-mobile"> <h2>UX/UI DESIGNER<br />GRAPHIC DESIGNER</h2> </div> </body> </html> Link to comment
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 On 1/26/2021 at 1:44 AM, Sherman said: Hi, i actually tried using this code but it doesn't work. Anybody know whats wrong or is able to provide me with the right code: Site: https://joshyeoh.squarespace.com/ Password: 1234 Hi. What is your problem? 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
PixelPage Posted May 29, 2021 Share Posted May 29, 2021 Where do you add this html code to keep the text from wrapping weirdly. My site is pixelpagecopy.com Desktop is fine, but there is a G wrapping to a second line all by itself on mobile Help! Link to comment
tuanphan Posted May 30, 2021 Share Posted May 30, 2021 On 5/29/2021 at 7:48 AM, PixelPage said: Where do you add this html code to keep the text from wrapping weirdly. My site is pixelpagecopy.com Desktop is fine, but there is a G wrapping to a second line all by itself on mobile Help! Which text do you have problem? 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
embodygreen Posted June 4, 2021 Share Posted June 4, 2021 (edited) When I try this I get a " Missing Opening '{' " and if I add a '{' to the beginning I get a syntax error on whatever line I add it to. If I delete the second } on line 13, I get a syntax error on line 1 www.embodygreencbd.com Edited June 4, 2021 by embodygreen Link to comment
tuanphan Posted June 5, 2021 Share Posted June 5, 2021 18 hours ago, embodygreen said: When I try this I get a " Missing Opening '{' " and if I add a '{' to the beginning I get a syntax error on whatever line I add it to. If I delete the second } on line 13, I get a syntax error on line 1 www.embodygreencbd.com Can you paste all code in Custom CSS? 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
embodygreen Posted June 8, 2021 Share Posted June 8, 2021 Got it - was pasting it into the wrong CSS area! Link to comment
tuanphan Posted June 13, 2021 Share Posted June 13, 2021 On 6/8/2021 at 11:00 PM, embodygreen said: Got it - was pasting it into the wrong CSS area! Do you need help with these? Site URL – https://www.embodygreencbd.com/ 1. (Header-Homepage) Change nav to white color? 2. (Footer) GG recaptcha text overlap button 3. (Tablet-Footer) change footer layout? 4. (Mobile-Products) Add breadcrumb on top of products? 5. (Mobile-Products) Reduce images size? embodygreen 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
embodygreen Posted June 13, 2021 Share Posted June 13, 2021 Please! That would be very helpful Link to comment
tuanphan Posted June 14, 2021 Share Posted June 14, 2021 Add to Design > custom CSS /* Home nav color */ body.homepage .header-nav-item a { color: white !important; } body.homepage header#header svg.icon.icon--cart { stroke: white; } body.homepage span.sqs-cart-quantity { color: white; } /* space button gg recaptcha */ div.hidden+.newsletter-form-footnote { margin-top: 30px; } /* mobile */ @media screen and (max-width:767px) { /* show breadcrumb */ .ProductItem-nav-breadcrumb { display: block !important; } .ProductItem .ProductItem-additional .image-block { width: 50%; margin: 0 auto; } } Jeremyn and embodygreen 2 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment