Topbar gap and sidebar social grid

Support
#1

Hi I would like to know how i could get rid of the gap in my topbar above my instagram feed. Also there seems to be an issue with my social grid text widget in my side bar. I have the icons set to three on a row but the Facebook icon suddenly doesn’t seem to cooperate. It worked when I first set it up but now there’s a gap between the icons and the follow me heading.

Thank you!

#2

Hi There,

Try adding the following CSS to get rid of the top gap:

    min-height: initial;
}```

Regarding the widget sidebar, please remove the space on the content. It is translated as break on frontend.  When adding code on the widget, make sure not to use spaces between html codes like when you want to format them on new line. Just add the code as it is. See this: https://screencast-o-matic.com/watch/cbjojwldFd

Hope this helps.
#3

Thank you!! As far as the sidebar widget, this is exactly how have received my code. It worked fine when I first inserted it into the text widget exactly as it is here. I do not see what could be wrong with it now. There’s no gaps from what i see in text widget.

[container]
[cs_block_grid type=“three-up” class=“social-grid”]
[cs_block_grid_item title=“Block Grid Item 1”]
[x_icon type=“facebook”]FACEBOOK
[/cs_block_grid_item]
[cs_block_grid_item title=“Block Grid Item 2”]
[x_icon type=“instagram”]INSTAGRAM
[/cs_block_grid_item]
[cs_block_grid_item title=“Block Grid Item 3”]
[x_icon type=“twitter”]TWITTER
[/cs_block_grid_item]
[cs_block_grid_item title=“Block Grid Item 4”]
[x_icon type=“pinterest”]PINTEREST
[/cs_block_grid_item]
[cs_block_grid_item title=“Block Grid Item 5”]
[x_icon type=“youtube-play”]YOUTUBE
[/cs_block_grid_item]
[cs_block_grid_item title=“Block Grid Item 6”]
[x_icon type=“envelope”]EMAIL
[/cs_block_grid_item]
[/cs_block_grid]
[/container]

#4

There’s also there’s still a bit of a gap in the top bar.

#5

Hi There,

Please add the code without new line. See this: http://demo.theme.co/integrity-1/shortcodes/block-grid/. You will notice that the code is not formatted like what you did. It is just a continues one line of shortcode.

Try updating the CSS to this:

    display: none;
    min-height: initial;
}```
#6

Topbar worked great but the sidebar is now jumbled. The css code I use to resize the icon and text doesn’t seem to take effect anyone.

.social-grid li {
text-align: center;
font-size: 24px;
}
.social-grid li span {
display: block;
font-size: small;

#7

Hi @tashera,

You may try adding the following code in your Customizer:

.x-sidebar .x-block-grid.three-up>li {
    width: 100%;
    text-align: left;
    margin: 0 0 10px 0;
}

Hope this helps!

#8

Thank you but this is the look in going for.

Using that code this is what I’m getting.

Should I delete the code I already was previously using?

.social-grid li {
text-align: center;
font-size: 24px;
}
.social-grid li span {
display: block;
font-size: small;

#9

Hi again,

You can use the following code instead:

.x-sidebar .x-block-grid.three-up>li {
    font-size: 13px !important;
}
.x-sidebar .x-block-grid.three-up>li i {
    display: block !important;
}

Hope this helps!

1 Like