Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #926515

    Hi,

    Please see http://www.johankoelewijn.nl/.

    In the header I’ve created an extra widget area in which I put an iconbox (thumbs up, Bel mij! etc.). We decided to show it from 768px upwards only, so to hide it on smaller screens (too much ‘clutter’ on the top). On screens of 990px and up, everything looks fine. However, on screens sizes 768 up to 989 px, the text of the iconbox is put underneath the icon. In that way it is not visible as it lays on top of the menu. See also attached screen shots.

    I tried to create some CSS to place the text next to the icon also on screens 768 up to 989 px (enough space…), but without success… :-(

    Can you help me please?

    Thanks a lot & have a nice day,
    Monique

    #926602

    Hey Monique,
    Please replace your code:

    #text-2 .textwidget .iconbox .iconbox_icon {
    display: inline !important;
    }

    with this:

    #text-2 .textwidget .iconbox,#text-2 div.iconbox_content {
    	display: inline-block !important;
    }

    This should make the white circle around the icon larger and put the widget content inline.
    Although it is a little hard to test with your current code in place. If this doesn’t help, please include a admin login in the private content area so we can take a closer look.

    Best regards,
    Mike

    #926688

    Hi Mike,

    When I use your code, the text is being placed inline with the icon also on screens 768-989px, however the icon itself is being placed more downwards. That doesn’t look very “pretty” and I don’t understand why this happens.

    I created a temp login for you (see below). Would you please be so kind to have a look?

    Thanks & regards,
    Monique

    #926964

    Hi,
    I replaced your code with this and it seems to work. Please clear your browser cache and check.

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    #text-2 .textwidget div.iconbox_content {
    	display: inline-block !important;
    }
    #text-2 .textwidget article.iconbox.iconbox_left_content,#text-2 .textwidget div.textwidget,#text-2 .textwidget div.iconbox_icon {
    	vertical-align: top!important; 
    }
    }

    Best regards,
    Mike

    #928020

    Hi Mike,

    Yes great! That looks so much better :-)

    Thanks for all your help!

    Can you flag this topic as closed please?

    Have a nice day,
    Monique

    #928024

    Hi Monique,

    Glad that Mike helped you :) Thanks for using Enfold and have a great weekend!

    Best regards,
    Nikko

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Help required with iconbox in extra widget area header’ is closed to new replies.