Collection text - How can I align differently for mobile and web?

[ellacoker]

Hello,

I would like to align my collection text to the left in desktop version and centre it for the mobile version. Please see photos attached... I am talking about the text "Masks" in this case. On another note - if someone is able to help me line up the margins in desktop version that would be much appreciated. I have got my page settings to full width but for some reason the product grid is only taking about 60% of the page for products.

Any help would be much appreciated.

[Ahmad31]

Hi @ellacoker please share your store url

[ellacoker]

https://admin.shopify.com/store/wss10u-is/themes/175807824166/editor

[Ahmad31]

@ellacoker you want like this 

Mobile screen view:

• Go to your Shopify admin panel.
• Navigate to Online Store > Themes > Actions > Edit Code.
• Open the theme.liquid file and paste the below code befor </head> tag. 

<style>
.collection-hero__title {
  text-align: left; /* Align text to the left by default */
}

@media (max-width: 768px) { /* Adjust breakpoint if needed */
  .collection-hero__title {
    text-align: center; /* Align text to the center on mobile screens */
  }
}
</style>

.

• save the changes and check it.

[ellacoker]

Thanks for your quick reply.

The images you sent are exactly how i want it. I tried putting it in themes.liquid but this didnt work so I put it in component.collection.hero.css and that seems to fix the text alignment problem for both desktop and mobile. however, the items still do not come full width to the page on desktop. how can i fix this issue now?

Thanks again,

Ella.

[Ahmad31]

On my screen it looks well as you say