Help position my text on product page

Solved

Help position my text on product page

Sicilia2025
Excursionist
26 0 4

Hello! 


I would like to position the text on the right side of my product page not so close to the product media. (More to the right side, leaving more space between the pictures and the text.) Is there a way to do this? Thanks in advance!

 

https://r20561-af.myshopify.com/products/apple-airpods-max-metal

Password: theaba

 

Inspiration (I'd like the position exactly how it is here):

https://eu.louisvuitton.com/eng-e1/products/lv-x-tm-speedy-soft-30-nvprod5940160v/M13257

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9865 2347 2945

This is an accepted solution.

Hi @Sicilia2025 

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:

 

@media screen and (min-width: 989px) {
    .product.grid .product__info-container {
        max-width: 100%;
        width: 50%;
        margin: auto;
    }

    .product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
        padding-left: 0;
    }
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1737290122476.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.

View solution in original post

Replies 5 (5)

qasim-devloper
Shopify Partner
169 12 23

Hey @Sicilia2025 this is Qasim a Sr. Shopify Developer.

In order to make the Product text far to the product meadia then please paste this code in the end of section-main-product.css file.

@media screen and (min-width: 750px) {
    .product__info-wrapper {
        padding: 0 0 0 20rem !important;
    }
}

You can adjust the rem value based on your need.

- Need a Shopify Specialist? Chat on WhatsApp +923289643774

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!

Made4uo-Ribe
Shopify Partner
9865 2347 2945

This is an accepted solution.

Hi @Sicilia2025 

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:

 

@media screen and (min-width: 989px) {
    .product.grid .product__info-container {
        max-width: 100%;
        width: 50%;
        margin: auto;
    }

    .product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
        padding-left: 0;
    }
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1737290122476.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.
Thevelora
Tourist
5 0 0

Hello dear

can you tell me what can i do to change all products image background to gradient color 

Made4uo-Ribe
Shopify Partner
9865 2347 2945

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:

 

product-info[id^="MainProduct-template--"][id$="__main"] {
    background: red;
}

 

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

     

 

 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

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.

EstherBui
Excursionist
275 39 41

Hi Sicilia2025


- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

 

 

 

 

@media screen and (min-width: 750px) {
   .product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
      padding-left: 140px !important;
   }
}

 

 

 

 

Result: 

EstherBui_0-1737291753180.png

 

Best, 
Esther

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