How to adjust text alignment on featured collection section

[YIVAN]

Hello all,

Is there a way for me to align everything further left in featured collection section? It is fine on the mobile version but when on desktop there is too much space.

Here is how it looks:

URL: https://www.yivan.us/

Pass: YIVAN24

Thanks in advance

[parth_ghelani]

Hello @YIVAN

I’ve Checked the issue on your site about what you post and i found the below mentioned solution.

You just need to follow below steps:

1. Go to shopify admin. in the Online stores list, click on three dots on the theme you want to make changes, and then click on the edit code in option list.

2. Find the file named “component-slider.css” and go to bottom of the file.

3. Now copy the below mentioned CSS code and paste at top of the file and save the file.

@media (min-width: 990px) {
  .slider--desktop .slider__slide:first-child {
    margin-left: 1.5rem;
  }
}

By applying this css, your issue will be fixed.

If the solution helpful to you, then kindly like and accept the solition.

If you have any other queries, you can contact me directly.

[BSSCommerce-HDL]

Hi @YIVAN ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.grid__item.slider__slide {
    margin-left: 50px !important;
}
.collection__title.title-wrapper--self-padded-tablet-down {
  padding: 0 !important;   
}

Here is result:

[GTLOfficial]

Hello @YIVAN ,
Go to online store ---------> themes --------------> actions ------> edit code-------> go to Assets-----> component-slider.CSS —> go to line 205
Replace this code

.slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }

with this code

@media screen and (min-width: 990px) {
    .slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
        padding-bottom: var(--focus-outline-padding);
        margin-left: 4.5rem;
    }
}

the result will be

please let me know if this solved the issue.

Thanks