• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

pfotop

New Coder
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:
1625413814450.png
What i'd like to change it to:

I've input this in my custom CSS codes but it doesn't work.
1625413728726.png
Please help me! Thank you in advance!

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

simong1993

Active Coder
Staff Team
Guardian
Hey and welcome, so i understand you right you want everything more centred :D

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 :D Hope this answers your question :D
 

pfotop

New Coder
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

Active Coder
Staff Team
Guardian
Hey, So edit:-

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

Too

HTML:
<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

New Coder
Hey, So edit:-

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

Too

HTML:
<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?

1626276518785.png
 

simong1993

Active Coder
Staff Team
Guardian
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 :D
 

pfotop

New Coder
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 :D
 

Attachments

  • download.pdf
    674.2 KB · Views: 1

simong1993

Active Coder
Staff Team
Guardian
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.
1626425891559.png
 

pfotop

New Coder
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?
Capture22.JPG
Thanks.
 

simong1993

Active Coder
Staff Team
Guardian
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
 

Top