Rich Text

[BLola]

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!

 

[Made4uo-Ribe · Accepted solution]

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;
}
}

• And Save. 
• result:
•  
• 

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

[Made4uo-Ribe]

Hi @BLola 

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

[BLola]

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

[Made4uo-Ribe · Accepted solution]

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;
}
}

• And Save. 
• result:
•  
• 

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

[BLola]

It worked! Thank you!

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

 

[Made4uo-Ribe · Accepted solution]

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;
    }
}

[BLola]

Thank you for your help!

[Made4uo-Ribe]

Your welcome

[BLola]

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

 

[Made4uo-Ribe]

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