Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

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/
 
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
 
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.
 
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 :)
 
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
 
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
 
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
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
 
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.
 
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
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom