Archived topic

HTML CSS help 2

7 replies · Started by silver on February 27, 2019

Viewing posts 1–8 of 8

February 27, 2019 at 7:44 pm #823996

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.

February 27, 2019 at 8:40 pm #824029

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?

February 27, 2019 at 8:53 pm #824039

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

February 28, 2019 at 8:49 am #824718

No problem :)

February 28, 2019 at 10:50 am #824811

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

February 28, 2019 at 3:59 pm #825065

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;
}

February 28, 2019 at 4:50 pm #825085

Worked perfectly!

I can now adjust completely where I want the column.

Thank you for your time and help :)

Have a wonderful day.

February 28, 2019 at 7:25 pm #825143

No problem :)

You as well!

This archived topic is closed to new replies.

Start building better websites today.