Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
stephanie25

Change text for mobile view

Question

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

Edited by stephanie25
Initial Revision

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

@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




Edited by tuanphan

You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

@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>







Share this post


Link to post
  • 0

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.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...