Layout of Collection Page - Venture - help!

Excursionist
30 0 3

Hi all, 

I previously had a filter app but there were too many glitches and it slowed my site down quite considerably.

I ended up having it removed but now I'm left with a big empty space where it used to sit. Would anyone know what coding I should alter to return to a full-width display for the three products per line?

Capture.JPG

 

 

 

 

 

 

 

My site is www.frontiers-woman.com

Many thanks

Mark

0 Likes
Shopify Partner
2569 133 431

You'll either have to edit the collection template to remove the relevant elements and CSS classes below or try changing your CSS styles.

In theme.scss.liquid or similar file find .side-filter-menu and .main-filter-content classes and comment them out.

Being sure to check for any other style rules that may uses those selectors.

If you need professional help to fix this quick contact me at paull.newton+shopifyforums@gmail.com  

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Excursionist
30 0 3

Hi Paul 

Really appreciate your input. 

I can see the following code in the theme .scss.liquid:-

.side-filter-menu {
float: left;
width: 20%;
width: calc(0% + 230px);
}

.main-filter-content {
float: right;
width: 80%;
width: calc(100% - 230px);
}

@media only screen and (max-width: 1060px) {
.side-filter-menu {
width: 25%;
width: calc(0% + 200px);
}

.main-filter-content {
width: 75%;
width: calc(100% - 200px);
}
}

@media only screen and (max-width: 767px) {
.side-filter-menu {
width: 100%;
float:left;
}

.main-filter-content {
width: 100%;
float:left;
}
}

 

Do you know which I should change?

Thanks again

Mark

0 Likes
Shopify Partner
2569 133 431

You should just be able to comment those out

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Excursionist
30 0 3

Sorry Paul, I'm bit unfamiliar with comment out. 

I see you add the <!-- and --> tags but where do I place them and what do i put inside them?

Thanks again if you have a minute to respond. 

 

 

0 Likes
Shopify Partner
2569 133 431

<!-- --> are html comments

use /*  */ for CSS 

https://developer.mozilla.org/en-US/docs/Web/CSS/Comments

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes