[Resolved] Html CSS help

Home Forums Support [Resolved] Html CSS help

Home Forums Support Html CSS help

Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #592597
    silver

    Hi guys,

    I realise this isn’t specifically an issue with the theme or plugin however I would appreciate any help in regard to resolving what I’m trying to do within the theme πŸ™‚

    I would like to have some content (links) be horizontal with each other which I currently can’t figure out how to do, so much so that my explanation of the issue is probably terrible too.

    To help illustrate what I’m trying to achieve here are some images ;

    The current layout specifically the ‘quick links’ ;

    https://imgur.com/yNQ1M0i

    What I would like is for half of those links to be aligned horizontally to the right, like this (created in photoshop) ;

    https://imgur.com/kO6F74p

    coding SEO friendly and obviously compatible with the major browsers a bonus !

    I currently have the simple CSS plugin which I can add some things too also.

    Any help is much appreciated!

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #592711
    David
    Staff
    Customer Support

    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;
    }
    #592725
    silver

    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

    #592873
    David
    Staff
    Customer Support
    #593414
    silver

    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.

    #593773
    David
    Staff
    Customer Support

    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');
    }
    #594310
    silver

    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 ;

    Blurred to the left

    #594343
    David
    Staff
    Customer Support

    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?

    #594350
    David
    Staff
    Customer Support
    #594416
    silver

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

    #594420
    silver

    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

    #594425
    David
    Staff
    Customer Support

    It is odd – i can say on my end it looks great on a 5k screen πŸ™‚

    #594471
    silver

    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.

    #594493
    silver

    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 ;

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

    #594546
    David
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 29 total)
  • You must be logged in to reply to this topic.