Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 14, 2018 at 10:08 am #926515
    Monique

    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

    March 14, 2018 at 1:43 pm #926602
    Mike

    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

    March 14, 2018 at 4:29 pm #926688
    Monique

    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

    March 15, 2018 at 2:12 am #926964
    Mike

    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

    March 16, 2018 at 11:05 am #928020
    Monique

    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

    March 16, 2018 at 11:07 am #928024
    Nikko

    Hi Monique,

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

    Best regards,
    Nikko

  • Author
    Posts
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.