Need Help with Sidebar Widget Spacing / Alignment

Support
#1

I’m struggling a bit with the spacing for my sidebar widgets. On desktop you’ll notice that some of the widgets appear stacked on top of each other, with out any gap in between

Also, some widgets are are not aligned properly, or are cut off:

Lastly, the widgets lack proper spacing on the sides as well as alignment when viewed on mobile:

Ideally, I would like all the widgets to have proper spacing between them, and all be aligned in the center with appropriate spacing on the sides.

Thanks in advance for any help!

#2

Hi @Frank19,

I have check the sidebar and notice that the normal class widget is missing on the that specific widget container - last widget at the bottom of the sidebar. The spacing is defined on this class. I am not sure how have you added it though. To fixed it, either you add the class widget on its container or you may add the following CSS on Theme Options > Global CSS

div#sidebar_btf_placeholder {
    margin-top: 2.75em; /*Default space between widgets*/
}

Regarding the content of the widget that is cutoff, the issue is coming from the widget content. It is an iframe with set height. Please check how you add the widget content, see if there is an option for height. If there is, please try to increase it.

All this issues are not coming from the theme but rather from the codes/content you have added. The following might also help if you want to inspect the actual codes to see the root cause specially the iframe height:

Happy Holidays!

#3

This worked great for desktop, thank you!

My only remaining issue is with mobile (see screenshot from original post). There doesn’t appear to be any left or right margins on the widget area. Unlike the content above which is in a container of some sort, the widgets go all the way to the sides of the screen and it looks a bit messy. I’d like there to be a small margin on the left and right of the widgets when displayed on mobile. Any suggestions?

Thanks

#4

Hi @Frank19,

Please add this to Theme Options > CSS

@media (max-width: 767px) {
	 .x-sidebar.right {
	 	padding-left: 25px;
    	padding-right: 25px;
	 }
	  .x-sidebar.right iframe {
	  	max-width: 100%;
	  }
}

Please do note though, that if the widgets (external elements like ads) still overflown from the container after this, then you need to resolve the issue within the widgets itself which fall outside of the support that we can offer.

Cheers!

#5

That code appears to have done the trick. Thank you!

#6

You’re most welcome,

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.