Jump to content

Issues with wrap text and text size on mobile - help!

Recommended Posts

Hi! I have two questions...

1. How do I prevent wrap texting on my entire site, excluding blogs?

2. How do I make the text in my navigation smaller so it's not split up like this image?

My website is GTMEnabler.com

Here is all the CSS code in my custom CSS (some of it attempted to solve this). Let me know if this is whats blocking it from working:
 

@media screen and (max-width:300px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 50% !important;
    padding: 10px;
    position: static;
    height: auto !important;
    top: 0 !important;
}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: auto !important;
}
}
/* Custom CSS for reducing text size in mobile navigation */
@media screen and (max-width: 640px) {
  /* Adjust the font-size value as per your preference */
  .mobile-nav-item a {
    font-size: 10px !important;
  }
}

/* Equal list slide */
@media screen and (min-width:992px) {
[data-section-id="627473abe507fc6faa07f0d5"] li {
    align-items:center;
    min-height: 300px !important;
}
/* Header height */
.header-announcement-bar-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
}
.sqs-block-summary-v2 .summary-carousel-pager {
    display: block !important;
}
.portfolio-text {

  display: none;
}
.comment-count span {
    font-size: 30px !important;
}
/* Header height */
.header-announcement-bar-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
@media screen and (max-width: 640px) { 
    #block-627f0621357b994502063985>div>h3{
        font-size:1.5em;
    }
}
.page-section.vertical-alignment--top:not(.content-collection):not(.gallery-section):not(.section-height--custom)>.content-wrapper {
    padding-top: 0px !important; 
}
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-top: 0vw !important;
    padding-bottom: 0vw !important;
}
[ data-header-style="dynamic" ].header {

  background-color : transparent;
  
  }
div.header-nav-folder-content a {
    color: black !important;
}
div.header-menu-cta a {
    background-color: var(--primaryButtonBackgroundColor) !important;
}
blockquote {
  background-color: #F7F7F8;
  padding: 20px;
  border-left: 5px solid #ccc;
}
blockquote {
  margin: 0;
  padding: 20px;
  background-color: #f7f7f7;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

@media screen and (min-width: 768px) {
  blockquote {
    max-width: 800px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 640px) {
  /* Target mobile devices with a viewport width of 640px or less */
  p {
    white-space: pre-wrap !important; /* Allow line breaks but prevent text from wrapping */
  }
}

 

Screen Shot 2023-04-27 at 10.36.46 AM.png

Screen Shot 2023-04-27 at 10.38.11 AM.png

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

FWIW I'm not sure you want to do this. You can't control the size of the screen that your content will be displayed on, which means at some point, the text will have to wrap or else it will be so small that it will be hard to read, particularly on mobile view. Since most web traffic these days is on a mobile device, Google prioritizes mobile layout, and it will hurt your SEO if your text is too small or your clickable elements are too close together.

You can dynamically scale text to always fit a line without CSS. That's what the <A> option does in the text editor:

image.png.ecdf1419a403a0d468a5e98d7fb1f26c.png

However, the font size across lines will only match if the text is all in the same block. Text in different blocks will scale to a different size depending on the length. It uses whatever size will fit that number of characters to the line, so you'll end up with mismatched fonts.

Link to comment

Yes. I need the lines on these services pages to be in one line. They look awful when split. If I adjust the size using the <A> option, it does it for both desktop AND mobile view. 

I also don't want my hearders to every be wrapped as well in desktop or mobile. 

The only text I want wrapped is long-form body text.

@qosmic

Link to comment

Create an account or sign in to comment

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


×
×
  • 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.