Html CSS help

Hi, you could use Tom's lightweight grid columns plugin:

https://wordpress.org/plugins/lightweight-grid-columns/

Or you can test the water with a simple flex box - markup your content like so:

<div class="flex-grid">
<div class="flex-column">
LIST ONE HERE
</div>
<div class="flex-column">
LIST TWO HERE
</div>
</div>

And this CSS

.flex-grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-column {
	-webkit-box-flex: 1;
    -ms-flex: 1 0 250px;
    flex: 1 0 250px;
}

David thank you so much !! that worked perfectly and exactly as I wanted :)

I have to say you guys go over and above to help out and it really is very much appreciated. I'm absolutely delighted with the theme/plugin and customer service is absolutely top notch :)

I may be back with more questions so apologies from now lol

Glad to be of help!

David, I pointed one of the lines to a page (the others already did), and that seems to have broken the structure of the two columns, any idea what went wrong ?

Whilst editing the page in text mode I placed &nbsp above the code and that also broke the column in the same exact way..removing it didnt fix it either, I had to go to an earlier revision which was 18 hours prior to fix it again.

Hi there,

OK - we the method you are using can be open to breakages, i would use this method where we can add the bullet image via CSS. So this mark-up uses the unordered list, and each list item only contains the link.

<div class="flex-grid">
    <ul class="flex-column">
        <li><a href="URL">Link Text</a></li>
        <li><a href="URL">Link Text</a></li>
        <li><a href="URL">Link Text</a></li>
    </ul>
    <ul class="flex-column">
        <li><a href="URL">Link Text</a></li>
        <li><a href="URL">Link Text</a></li>
        <li><a href="URL">Link Text</a></li>
    </ul>
</div>

Same flex box CSS but now we add your bullet icon image as the list style image:

.flex-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-column {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 250px;
    flex: 1 0 250px;
}
.flex-grid ul {
    list-style-image: url('bullet-image-url.jpg');
}

Thank you David, that worked structurally and it seems solid right now with no breaks.

There is one strange issue with it however and that is the bullet points (which are now the icon images)on the left side are all slightly blurred, the ones to the right are crystal sharp.

Here is a pic of that ;

Sorry that image link is broken, i can't see the difference on my browser although that could just be my tired old eyes lol

Are the images Left & right both the same size?

Here is the image I have David, not sure you can see but the paws on the left are slightly blurry..very weird.

[img]https://i.imgur.com/XtwMYaE.jpg[/img]

If you right click the image and click 'open image in new tab' you'll see the accurate size of the image and icons as obviously the image is being made smaller here so more difficult to see the difference.

Yep the images both left and right are the same image and same size...it really is baffling lol

It is odd - i can say on my end it looks great on a 5k screen :)

Great that it looks good your end..

If I play around with the window size, it becomes more apparent with the blurriness switching from the left side to the right side, so perhaps something to do with screen size, not entirely sure. Once it gets down to mobile size it's perfect both sides for me.

Just tried through Firefox and it's perfect no blurriness so seems to be a chrome issue.

Just for clarification here is the problem on video..

Now the difference can't be seen as greatly just because the video quality isnt the best but it can be seen.

The first part of the video you see the left icons slightly blurry I then change play around with the browser window and you'll see the blurry icons then switch to the right.

Best watched on youtube for the actual size ;

[youtube]https://youtu.be/FJ9K3MEeeGU[/youtube]

I've come to the conclusion that it's something to do with the size of the screen and chrome.

That's odd, i wonder if its the flexbox. In this CSS:

.flex-column {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 250px;
    flex: 1 0 250px;
}

Can you change the '1s' to '0s'

It will stop the containers from increasing in size which may cause the issue.