Jump to content

Change text for mobile view

Recommended Posts

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 Designer
Graphic Designer

Thanks

Link to comment
  • Replies 13
  • Views 4.6k
  • Created
  • Last Reply

@stephanie25 You can're remove "|"

There are some methods you can use

  1. 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

  2. Decrease/Increase font size of UX/..... on Mobile

  3. 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!)

Link to comment

@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
  • 2 weeks later...
  • 1 year later...

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
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
  • 3 months later...
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
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
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?

embodygreencbd.com-01-min.png

2. (Footer) GG recaptcha text overlap button

embodygreencbd.com-02-min.png

3. (Tablet-Footer) change footer layout?

embodygreencbd.com-03-min.png

4. (Mobile-Products) Add breadcrumb on top of products?

embodygreencbd.com-04-min.png

5. (Mobile-Products) Reduce images size?

embodygreencbd.com-05-min.png

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

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!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.