Prestige Theme: Change width of "recently viewed items" and "product suggestions"

Store Design
1

Hello,

I hope someone can help with this little issue.
When I open my page on a high resolution screen, then theres a few elements that I would like to have a max width on, so they won’t resize to screen and get so large.

  • At the bottom of the collection page, I would like a max width on the “recently viewed items”, and making it show more than 3 items if its possible (but not as important as the width).

CuteGeek_3-1628247883956.png
CuteGeek_3-1628247883956.png3440×1440 309 KB

  • At the bottom of the product page I also have “recently viewed items” and “product suggestion”, both of those need to have a max width (and perhaps the option to show more products than 3 and 4) - but the width is the most important.

CuteGeek_1-1628247807362.png
CuteGeek_1-1628247807362.png3440×1440 272 KB

CuteGeek_2-1628247855424.png
CuteGeek_2-1628247855424.png3440×1440 280 KB

URL: www.cutegeek.dk
Password: Maria1234

2

hello @CuteGeek

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-product .ProductRecommendations .ProductListWrapper{
	max-width: 1100px;
        margin: 0 auto;
}
1 Like
3

@Kinjaldavra Thanks, it fixed one of the rows.
Do you also know how to set a max width of the bottom row?

CuteGeek_0-1628249251667.png
CuteGeek_0-1628249251667.png3440×1440 319 KB

4

hello @CuteGeek

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-recently-viewed-products .ProductListWrapper{
	
	      max-width: 1100px;
        margin: 0 auto;
}
1 Like
5

@CuteGeek

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-product .ProductRecommendations .ProductListWrapper{
	max-width: 1100px;
        margin: 0 auto;
}
6

@Kinjaldavra Works like a charm, thank you so much.

1 Like