How to change text to horizontal?

Solved

How to change text to horizontal?

pauli32
Tourist
8 0 1

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

url: https://finnrest.eu/en

pw: shaugh

Accepted Solution (1)

Huptech-Web
Shopify Partner
1047 208 225

This is an accepted solution.

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

 

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 12 (12)

Made4uo-Ribe
Shopify Partner
9882 2353 2951

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

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1738705813978.png

     

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
pauli32
Tourist
8 0 1

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.

pauli32
Tourist
8 0 1

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

 

PageFly-Richard
Shopify Partner
4902 1102 1781

Hi @pauli32 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
.page-width.page-width--narrow.section-template--24330223223109__main-padding {
    max-width: 100%;
    text-align: center;
}

</style>

PageFlyRichard_0-1738718029274.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

pauli32
Tourist
8 0 1

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.

pauli32
Tourist
8 0 1

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

LizHoang
Shopify Partner
948 114 148

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

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program
pauli32
Tourist
8 0 1

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.

pauli32
Tourist
8 0 1

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

Huptech-Web
Shopify Partner
1047 208 225

This is an accepted solution.

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

 

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
pauli32
Tourist
8 0 1

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

Huptech-Web
Shopify Partner
1047 208 225

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required