Rich Text

Store Design
, , , , ,
1

Hi. Does anyone know how to make this text line stretch the entire page? Every time I try to adjust the font size, it results in two lines instead of one. But we just want one line with larger font across the entire page. Many Thanks!

Screenshot (2).jpg
Screenshot (2).jpg1185×431 55.3 KB

2

Hi @BLola

You texts probably got constraints with the container width. What is your website?

3

It’s this one My Store (76efa0-54.myshopify.com)

4

Thank you for the information @BLola . NOTE: This only applies to the specific section mentioned. I have the section scrolled on mobile since your text is long

  1. From you Admin page, go to Online Store > Themes

  2. Select the theme you want to edit

  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)

  4. Then place the code below at the very bottom of the file.

section#shopify-section-template--14968785862736__rich_text .rich-text__blocks {
    max-width: 100%
}

@media screen and (min-width: 750px) {
   section#shopify-section-template--14968785862736__rich_text .rich-text__wrapper {
        width: 100%;
       
    }
}

section#shopify-section-template--14968785862736__rich_text .rich-text__blocks {
    white-space: nowrap;
}

@media screen and (max-width: 749px) {
section#shopify-section-template--14968785862736__rich_text .rich-text__wrapper {
    overflow: scroll;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

It worked! Thank you!

I have one more question. Do you know how to make our main menu items a little bit bigger?

Screenshot (6).png
Screenshot (6).png1478×298 235 KB

6

Hi @BLola

Yes, please add the follow codes. You can change the 17px to the desired size you want but I would suggest not to go beyond 17px. Also added the code to fix the overflow on your richtext

section#shopify-section-template--14968785862736__rich_text  .rich-text__blocks.center {
    overflow: auto;
}

@media screen and (min-width: 990px) {
    .header:not(.drawer-menu).page-width {
        padding-left: 0;
        padding-right: 2rem;
    }

    a.header__heading-link {
        padding: 0
    }
    .header span {
        font-size: 17px;
    }

    .header .list-menu--inline {
        flex-wrap: nowrap;
    }
}
1 Like
7

Thank you for your help!

8

Your welcome

9

Hi. Is there a way to change the font just for this saying? So it won’t affect anything else but this saying

Screenshot (7).png
Screenshot (7).png1833×404 48.1 KB

10

What font style do you like to change? The sizes, boldness, or etc.