How to change text to horizontal?

Store Design
,

Topic summary

A user sought help fixing text display issues on their Shopify store’s “Contact” page, where content appeared vertically instead of horizontally. The problem also affected other pages like “About Us,” and they needed a universal solution.

Initial Solutions Offered:

  • Multiple community members provided CSS code targeting specific page elements
  • Early suggestions only centered the page title but didn’t fix the full layout
  • The user clarified they needed the entire page content (including tables) to display correctly across all pages

Final Resolution:

  • The working solution involved adding CSS code to the base.css file that adjusts the .page-width--narrow class:
@media screen and (min-width: 990px) {
    .page-width--narrow {
        max-width: 100%;
        padding: 0 20px;
    }
}
  • This code applies universally to all pages, solving both the immediate issue and preventing problems on future pages
  • The user confirmed this solution worked when added to custom CSS
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

How to change the text on the “Contact” page from vertical to horizontal? Thanks in advance!

url: https://finnrest.eu/en

pw: shaugh

1 Like
2

Hi @pauli32

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.section-template--24330223223109__main-padding {
    max-width: 100%;
}

.section-template--24330223223109__main-padding h1.main-page-title {
    text-align: center;
}

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

3

Hi @pauli32

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1738718029274.png
PageFlyRichard_0-1738718029274.png1920×953 46.6 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

4

Hi @pauli32

You can follow the instruction here :

  1. Go to Shopify > Online store > theme > customize

  2. Click to Settings > Custom CSS > Paste this code to the section and save.https://prnt.sc/Rl66N9K_Bjvs

.page-width.page-width--narrow.section-template--24330223223109__main-padding {
    max-width: 100% !important;
}

Result:

LizHoang_0-1738744654909.png
LizHoang_0-1738744654909.png1578×712 25.2 KB

5

Thank you for your response! However, this code only helped move the title, but I want the entire page to display correctly, including the table visible on the page. I hope you have a solution for this.

6

Thank you for your response.

However, this code only helped move the title, but I want the entire page to display correctly, including the table visible on the page. In addition, if I create a new page, such as “About Us,” it also appears incorrect. So, I need a solution that applies to all pages.

I hope you can help me with this, and thank you in advance.

7

Thank you for response.

However, this code only helped move the title, but I want the entire page to display correctly, including the table visible on the page. In addition, if I create a new page, such as “About Us,” it also appears incorrect. So, I need a solution that applies to all pages.

I hope you can help me with this, and thank you in advance.

8

It looks exactly how I want on your screen, but not on mine.

9

It looks exactly how I want on your screen, but not on mine.

10

Additionally, I need a solution that applies to all pages if I add new ones. Thank you in advance!

11

Good day @pauli32 ! To achieve the same result, simply follow these steps:

  1. Go to the online store.
  2. Navigate to the Theme Library.
  3. Click on “Edit Code” and find the base.css file and write the code.
@media screen and (min-width: 990px) {
    .page-width--narrow {
        max-width: 100%;
        padding: 0 20px;
    }
}​

Here, is the screenshot of the same.

Contact-us.png
Contact-us.png1296×529 14 KB

If this helps, please like & accept my solution. If you have any further questions, feel free to ask!

12

Hi, thank you so much! This was the only solution that helped me by adding this code to the custom CSS. Thank you!

13

@pauli32 , I’m glad it worked for you. Feel free to reach out anytime if you need more help! :blush: