[Resolved] HTML CSS help 2

[silver]

Hey David to make it easier, I just opened a new thread but for your reference here is the link to the other with all the information and advice you gave me about this – https://generatepress.com/forums/topic/html-css-help/page/2/

David, it broke again so opening this up again (sorry) lol

I think it’s because of Gutenberg..Leo helped me with another issue that Gutenberg was over-writing the css and I think the same has happened in this instance.

So if you look at ‘introduction page’ at the bottom of the page.. you can see the Quick Links to the right have now shifted much further to the right (used to be closer to the center).

Any way I could fix this?

Thanks.

[Leo]

Hi there,

Don’t think this has anything to do with Gutenberg as you created those columns.

I’m not seeing any obvious issues here:
https://www.screencast.com/t/TeXKl5oHlGB
https://www.screencast.com/t/F1bjaAcg

Is that not what you are seeing?

Also if you are using Gutenberg, any reasons you don’t want to use Columns block?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[silver]

Hey Leo!

Hmm I see so I wonder why then it suddenly changed.

Ok so previously the column to the right was much closer to the first column.. they were not as far apart from each other if that makes sense?

I have no idea if using the columns would work but I could give it a try, I’ll reply here again either way.

Thanks again Leo for your time 🙂

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[silver]

Hi Leo

Ok I’ve tried multiple ways using the columns within Gutenberg and unfortunately, I am unable to get everything lined up the way I need it to, either the image (tiny paw print) ends up being too far away from the text, or the spacing between them is much too large.

Perhaps If I could fix what I already have in place (moving the second list to the right more to the left) for now at least and if I manage to find a way in the future using the columns then that’s great too.

If you have any idea as to how I could fix this, I would very much appreciate it 🙂

[Leo]

So as I mentioned above both columns currently have the same margins/padding.

If you only want to modify the second column margin, then change the HTML to this:

<ul class="flex-column second-column">
    <li><a href="https://www.bengalcat.co.uk/buying-a-bengal-cat/">Buying your Bengal cat or kitten</a></li>
    <li><a href="https://www.bengalcat.co.uk/keep-your-bengal-safe/">Keeping your Bengal safe</a></li>
    <li><a href="https://www.bengalcat.co.uk/prepare-for-a-cat-show/">Preparing your Bengal for a show</a></li>
    <li><a href="https://www.bengalcat.co.uk/bengal-cats-for-sale/">List of Pedigree Bengal Breeders</a></li>
</ul>

Then add this as your CSS:

ul.second-column {
    margin-left: 5em;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[silver]

Worked perfectly!

I can now adjust completely where I want the column.

Thank you for your time and help 🙂

Have a wonderful day.

[Leo]

No problem 🙂

You as well!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts