How do I adjust the text to the left?

[Signebp]

Hi

I am using the broadcast theme and have been in contact with the support about making changes in the sections called ‘subcollections’ that is shown on all of my collection pages.

Normally the subcollections are shown as pictures but I wanted them as text (with links). So far so good. I now need the text to be more adjusted to the left side of the screen. Is there anyone who can help me with that?

Please note that the preview link below is for a test version of the store and that it is not for the live store.
Preview link: https://bp7hd8fu6t5e4b7v-76004950356.shopifypreview.com

[dmwwebartisan]

@Signebp

Please add the following code at the bottom of your css file.

.subcollection__link {  
    padding: 0px !important;
}

Hope this works!

[namphan]

Hi @Signebp,

Please go to Customize > Sections > Custom CSS and add code:

.subcollection__link {
    padding-left: 0;
}

If I helped you, then a Like would be truly appreciated.

[Signebp]

Hi!

Thanks for your response. It wasn’t quite that look I wanted. It is more like this (pleace see picture for reference). Do you know how to do that? And perhabs also make a line under all of the links?

Best regards, Signe

[Signebp]

Hi!

Thanks for your taking your time to help.

It wasn’t quite that look I wanted. It is more like this (pleace see picture for reference). Do you know how to do that? And perhabs also make a line under all of the links?

Best regards, Signe

[SkillUpDennis]

What you’re seeing is most likely a browser rendering artifact triggered by fractional pixel calculations at certain Windows display scaling settings (100% or 125%).

When elements have widths/heights that don’t fall on whole pixels, the browser rounds them differently depending on scaling, which can leave a thin white “band” between sections. At 150% scaling, the math changes and the gap disappears — which matches what you’re experiencing.

A few ways to target a permanent fix:

1. Ensure backgrounds fill the gap

background-color: #yourcolor;
background-size: cover;
background-repeat: no-repeat;

2. Force pixel-perfect box sizing

* {
  box-sizing: border-box;
}

3. Avoid fractional percentages (e.g., 33.3333%) — use calc() or fixed values where the gap appears.

4. Wrap and hide overflow on parent sections:

overflow: hidden;

This isn’t always a “bug” in your theme — it’s how Chrome (and sometimes Edge) renders fractional layouts at specific DPI settings. But with some precise CSS adjustments, you can usually make it disappear entirely.

If you’d like, I can pinpoint the exact section and adjust the CSS in your Rise theme so the white band is gone at every scaling level — no workarounds needed. I’ve fixed the same issue for other Shopify stores and can do it without affecting your layout.

[namphan]

Hi @Signebp,

Please change code:

.subcollections .grid {
    justify-content: left;
    display: flex !important;
}
.grid-item.subcollection__item {
    height: auto !important;
}
.subcollection__link {
    padding: 0;
    position: relative;
    height: auto !important;
}

If I helped you, then a Like would be truly appreciated.

[Signebp]

Hi

Thanks for getting back. The new code made it right on desktop but not on mobile. Do you have a code that makes it look right on both desktop and mobile?

Furthermore, can you add a code so that I can make the font size a bit smaller?

[Bang_T]

Hello @Signebp

in Theme settings → Custom CSS

add this code

@media only screen and (max-width: 749px) {
    .grid--mobile-slider .grid-item {
        width: auto!important;
    }
}

[Signebp]

Thanks a lot! It worked