Full width store

Hello,

the website I’m working on is almost finished. One of the missing things is that the store is not full width, a problem that became apparent now that It’s being populated.

Is there a way to make it full width? Something along this lines of this: https://imgur.com/a/Us9Kg

Is it possible to stretch the single product page as well?

The store is located here: http://darila-grafix.si/trgovina/

Thanks for all the help,

Best wishes,
T.D.

Hello,

It looks like this issue requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.

Hello Roman,

Alright, I understand. You guys have been extremely helpful with the setup of my web page. One of the best support forums I’ve seen. Keep it up.

Best wishes,
Tilen T.

Well, since the support policy does not cover this, I’ve went and found my own ghetto solution to the problem.

Firstly, I’ve stretched the website by using the following CSS code:

.container {
width: 95%;
}
.content-area{
width: 72%;
}

Which has an added benefit of making the website, at least in my opinion, nicer to the eye and maximizes the space usage . Anyhow, the second step was to decrease the size of WooCommerce product icons with the following CSS code:

@media only screen and (min-width: 768px) {
ul.products li.product {
width: 25%!important;
}
}

Lastly, a few lines were added to the functions.php

add_filter(‘loop_shop_columns’, ‘change_loop_columns’, 999);
add_filter(‘storefront_loop_columns’, ‘change_loop_columns’, 999);
function change_loop_columns() {
return 4;
}

Like it was mentioned, the following solution is by no means the recommended one, but it works on most popular screen resolutions and some odd ones. But is can cause issues.

P.S.
Using:

@media (min-width: 1330px) {}

Helps

Okay, thanks for sharing that :slight_smile:

Kind Regards, Roman.