CSS Help needed to move content to fill white spaces on the left

[pfotop]

I'm been on this for days and can't seem to find a solution to this. I am attaching my current CSS codes and what I'd like to change it to.
Current:

What i'd like to change it to:

I've input this in my custom CSS codes but it doesn't work.

Please help me! Thank you in advance!

page url: https://shopfwc.com/our-products/

 

[BGB]

I don't understand anything. Could you please explain a little bit clearly what you want?

 

[simong1993]

Hey and welcome, so i understand you right you want everything more centred

The issue you are having is not a CSS issue but its more of a understanding issue with bootstrap.

If we look at content-area col-md-9, so bootstrap runs on ether no options so col-md would use the whole container or col-md-12 would tell it to use the whole container. Think of this as 12 bricks in a wall, if i place 9 bricks say blue and then i have to fill the rest up to make 12 so i would use a different colour. Bootstrap will always do 12 bricks but if you do no define the 12 bricks it will leave them empty Hope this answers your question

 

[pfotop]

Hi Simong1993! Thanks for helping understand this better! I’ve tried to play around with the HTML but it didn’t work and have no idea how I can amend it after days of googling. Would you be able to help me out here? Thank you so much.

 

[simong1993]

Hey, So edit:-

<div id="primary" class="content-area col-md-9"><main id="main" class="site-main" role="main"><header class="woocommerce-products-header">

Too

<div id="primary" class="content-area col-md-12"><main id="main" class="site-main" role="main"><header class="woocommerce-products-header">

and this will tell you Primary ID dive to use the whole container and not just some of it

 

[pfotop]

Hey, So edit:-

<div id="primary" class="content-area col-md-9"><main id="main" class="site-main" role="main"><header class="woocommerce-products-header">

Too

<div id="primary" class="content-area col-md-12"><main id="main" class="site-main" role="main"><header class="woocommerce-products-header">

and this will tell you Primary ID dive to use the whole container and not just some of it

Hi Simong!

I actually did that too before I asked for your help, but.... it kinda like went to fill even my headers which isn't what I want. And my home page was messed up too, it was reflecting the product page information. See screenshot.

This was what I did, I copied the entire source below as well as there was no change if I only input the first row. Am I doing something wrong here?

 

[simong1993]

Do not take this personally but man what a mess, Im seeing tags what no start and tags with no ends :S Could you send me the whole file please so i can take it apart and structure it for you, you may find the issue your having is now a end tag our of place

 

[pfotop]

Hi Simong!

Thank you so much, really appreciate any help I can get. It is a huge mess.

Do not take this personally but man what a mess, Im seeing tags what no start and tags with no ends :S Could you send me the whole file please so i can take it apart and structure it for you, you may find the issue your having is now a end tag our of place

 

[simong1993]

Hey, i have just gone to your site and changed :-

<div id="primary" class="content-area col-md-9"><main id="main" class="site-main" role="main">
to
<div id="primary" class="content-area col-md-12"><main id="main" class="site-main" role="main">

and it works lol, try and do that your end and it should solve your issue.

 

[pfotop]

Hey, i have just gone to your site and changed :-

<div id="primary" class="content-area col-md-9"><main id="main" class="site-main" role="main">
to
<div id="primary" class="content-area col-md-12"><main id="main" class="site-main" role="main">

and it works lol, try and do that your end and it should solve your issue.
View attachment 1010

Thank you! I did that but my home page screwed up. I've decided to live with it. But I do have another issue now which is my mobile cart view from my mobile screen, it's currently showing as this, cant see the subtotals/update cart icon. Could you help me out?

Thanks.

 

[simong1993]

i think the issue you are having mate its your trying to edit a theme that is designed to be dynamic. Its designed for someone to edit the settings not the code. No matter what you do its going to fight back 🤣 and unless you are going to sit there for hours dealing with every option this is going to take a while. Your best bet is to ether code from scratch to what you want or you need a new theme