How do I fix the London so that some part of it is not covered?

Store Design
, , , , , ,

Topic summary

A user is experiencing layout issues on their Shopify store (onecap.se) using the London theme, where certain elements are being covered or obscured.

Proposed Solution:

  • Another user provided CSS code targeting .product-block__title with a margin-left: 7px property for screens under a specific width
  • The CSS should be added to the styles.css file

Current Status:

  • After implementing the CSS, the original poster reports partial improvement but notes:
    • Some content is still being covered
    • Homepage text has shifted slightly to the right
  • Screenshots were shared showing the issues, though the exact visual problems aren’t fully described in text

Resolution: The issue remains unresolved and requires further CSS adjustments to properly align all elements.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

My website: www.onecap.se

Skärmavbild 2024-02-26 kl. 09.59.40.png
Skärmavbild 2024-02-26 kl. 09.59.40.png372×1414 110 KB

2

@OneCap ,

Please use below CSS.

@media(max-width: 479px){
.product-block__title {
    margin-left: 7px;
}
}
1 Like
3

Where do I put the code?

4

@OneCap , in styles.css file.

5

there are a little bit left that is being covered and also the text on the homepage has moved a little to the right..

Skärmavbild 2024-02-26 kl. 23.33.46.png
Skärmavbild 2024-02-26 kl. 23.33.46.png200×1172 47.2 KB

Skärmavbild 2024-02-26 kl. 23.33.53.png
Skärmavbild 2024-02-26 kl. 23.33.53.png830×1150 99.9 KB