ow do i change the borders to non-rounded and extend the width of featured faces carousel?

Shopify Discussion

Topic summary

A user seeks to remove rounded borders and eliminate white space on the left and right sides of a featured faces carousel on their Shopify store (audette.store).

Proposed Solution:
A responder provides custom CSS code targeting .page-width and .faces-carousal-wr classes to:

  • Remove padding and set max-width to 100%
  • Set border-radius to 0px

The code should be added to the section’s Custom CSS field in the theme customizer.

Current Issue:
The .page-width CSS rule triggers an “invalid CSS” error and doesn’t apply, though the border-radius adjustment appears to work.

Alternative Approach:
If CSS continues failing, the recommendation is to:

  1. Edit theme files directly (Online Store > Themes)
  2. Search for “faces” or “featured-faces” .liquid files
  3. Manually remove the class="page-width" attribute

Status: Partially resolved—borders fixed, but width extension remains problematic due to CSS validation errors.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

withaudette_0-1743858002994.png
withaudette_0-1743858002994.png1780×667 223 KB

How do i change the borders to non-rounded and extend the width of this content? There’s white spaces on left and right side.

Website: www.audette.store (code: test)

Thank you

1 Like
2

Hi @withaudette ,

Add this CSS code to achieve both. Customize your theme, edit that section, at the bottom you’ll see Custom CSS, add this code to that field. Change the 0px to adjust the borders. 0 = no borders.

.page-width {
    padding: 0 !important;
    max-width: 100% !important;
}

.faces-carousal-wr .swiper-slide,
.faces-carousal-wr .swiper-slide img {
    border-radius: 0px !important;
}

This is how it should look:

JunaidAhmed_0-1743957667510.png
JunaidAhmed_0-1743957667510.png4320×2478 1.24 MB

3

Hi the page width doesn’t work, it says invalid css

4

Can you check without the page-width? Will that work? Also show me where you’re putting the CSS. Thanks

5

Tried both method, it still doesn’t work, please see image below for reference:

withaudette_0-1744045059507.png
withaudette_0-1744045059507.png271×363 11 KB

6

I see the border radius is working fine on the store. I guess that’s working. If you could hover over the .page-width that has the red underline, I think it’ll show you a detail about the error.

Anyway, if the CSS doesn’t work, you’ll have to edit the theme files then.

  1. Go to Online Store > Edit the theme you want to update.

  2. Search for “faces” or “featured-faces”, open the relevant .liquid file.

  3. Inside the the file, look for class=“page-width” and remove that.

I hop this helps.