Widgets on the middle of the Front Page

• 

  blissfulaiks · Member · Feb 23, 2015 at 4:57 am

  • Copy link
  • Add topic to favorites

  I wonder if there is a CSS code for the widgets that I recently added. I added two widgets so far FB and Follow Blog.
  It looks perfectly fine on my mobile phone, but on the big screen it looks like the two widgets are one on top of the other making the blog posts towards the end. One should scroll down further to see the blog posts.
  Could you please help me provide a CSS code in order for the widgets to be side by side? Other than the FB is on top of the Follow Blog.

  Here is the website @ http://blissfulangelie.com/

  Thank you

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 23, 2015 at 5:57 am

  • Copy link

  Hi there, I’m not seeing this on my desktop monitor. Both widgets are showing completely and there is no overlap. I checked in Chrome, Safari and Firefox on my Mac, and see it the same on all three. Are you still seeing the widgets overlapping?

• 

  blissfulaiks · Member · Feb 23, 2015 at 6:38 am

  • Copy link

  Hi thanks for the quick response.
  Do you have a CSS code for widgets to go side by side other than one on top of the other?
  It doesn’t overlap. I just want the widgets side by side, Like the FACEBOOK is right next to Follow Blog

• 

  thesacredpath · Member · Feb 23, 2015 at 6:49 am

  • Copy link

  Hi, give the following a try. I’ve limited this change to screen/window widths wider than 880px so that alignment on smaller screens reverts back to the original.

  @media screen and (min-width: 880px) {
  #facebook-likebox-7 {
      float: left;
      padding-left: 150px;
  }
  #blog_subscription-8 {
      float: right;
      padding-right: 150px;
  }
  }

• 

  blissfulaiks · Member · Feb 23, 2015 at 6:54 am

  • Copy link

  Oh WOW! You are amazing! thank you so much :) Sir, I wonder how can I make this 3 widgets instead of just 2?

  I thought it would give me more opportunity to showcase my website.

  I appreciate it :)

• 

  thesacredpath · Member · Feb 23, 2015 at 10:22 pm

  • Copy link

  If you add another widget, we can look at things and make adjustments to what we added and then get the position on the third widget right.

  If you decide to add a third, let us know and we can help work all that out.

• 

  blissfulaiks · Member · Feb 27, 2015 at 8:54 pm

  • Copy link

  Hi I already added one more widget to my front page. How can I make these 3 widgets in on one line instead of how it looks like now? Can I get the CSS code, please?

• 

  thesacredpath · Member · Feb 27, 2015 at 10:00 pm

  • Copy link

  Ok, replace the rule I had given above with the following which gets all 3 of them side-by-side.

• 

  blissfulaiks · Member · Feb 27, 2015 at 10:12 pm

  • Copy link

  okay thank you so much. I am still waiting for the CSS code, please?

• 

  thesacredpath · Member · Feb 28, 2015 at 3:57 am

  • Copy link

  Heh, sorry about that. That is what I get when I get to moving too quickly. Here is the code.

  @media screen and (min-width: 880px){
  	#facebook-likebox-7{
  		float:left;
  		padding-left:30px
  	}
  
  	#blog_subscription-8{
  		float:left;
  		padding-left: 30px;
  	}
  
  	#categories-11 {
  		float: right;
  	}
  }