Resize "product title" text on product pages in desktop view.

[Geltier]

Hi!

In mobile view, the text is in correct place. But in desktop view, the text is not in line. Photo attached to show what I mean. I wish the text had same padding as "add to cart" and the text below add to cart.. in desktop view.

Thank you!

[Asad-Mahmood]

whats your store url ?

[Geltier]

https://geltier.com/products/strider-forest-silver

[Asad-Mahmood]

what do you want to update in mobile view ?

[Geltier]

In mobile view its all good, its only in desktop view we need help with

[Asad-Mahmood]

go to your online store -> edit code -> theme.css file and paste this code in the end of file

@media (min-width: 1024px) {
  [data-block-type="title"],
  [data-group-type="text-with-rating"] {
    padding-left: 12px;
    padding-right: 12px;
  }
}

[Geltier]

Is this only for desktop view as requested? It did not work.

[Asad-Mahmood]

try this

@media (min-width: 1024px) {
  [data-block-type="title"],
  [data-group-type="text-with-rating"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

[Geltier]

I tried a few times, did not work for us..

[tim]

This is what I do not like on your page:

You have this rule in your "Custom CSS" setting of this section:

div {
  padding-right: 1px;
  padding-left: 1px;
}

This is very broad rule and applies to much more elements then you've intended -- I've added outline so you can see which ones are affected:

 I've used outline because it does not affect size itself.

Those broad blue stripes are not thick borders -- they are accumulated due to nested divs, and here is your second problem -- there is too much nesting in your product description (probably too much copy/pastes), and it's different nesting depth for different products, which means the thickness of these "bands" (white space in real life) will be different for different products.

Some other products have it even worse -- twice as thick.

div {
  padding-right: 2px;
  padding-left: 2px;
}

I'd remove these rules mentioned above and it will align description with heading:

Now, if you'd like to align your cart button to the left edge, you can remove this rule added to the layouts/theme.liquid above the </body>:

    <style>
      buy-buttons.buy-buttons {
        padding: 0 12px !important;
      }
    </style>