stephanie25 Posted August 18, 2019 Posted August 18, 2019 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
tuanphan Posted August 18, 2019 Posted August 18, 2019 @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 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!)
stephanie25 Posted August 19, 2019 Author 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>
Votisent Posted August 27, 2019 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.
Sherman Posted January 26, 2021 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>
tuanphan Posted February 2, 2021 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!)
PixelPage Posted May 29, 2021 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!
tuanphan Posted May 30, 2021 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!)
embodygreen Posted June 4, 2021 Posted June 4, 2021 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
tuanphan Posted June 5, 2021 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!)
tuanphan Posted June 13, 2021 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? 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!)
tuanphan Posted June 14, 2021 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; } } 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!)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.