Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by John Gronley
John Gronley
137 Points

How to get widget to wrap in center

Hello all;

This is my first post and I just signed up for a year of training. I have a theme that I tweaked but having some problems. First off one of my customers has a mammoth Apple monitor and this theme shows a white strip along the bottom. He has the same theme but didn't tweak it and it is working fine. But my primary question is the quick search that sits on the top image. It works fine when it is set to sit off to the right in two columns and when on a smart phone it shows nicely; but I would like to format it so that shows as one line on a desk-top but then reformats so it is visible on a smart phone. As of now all you see is a portion of it. I tried floating it to the center but that didn't work. Any help? the domain is http://johnstestsite.org

Thanks,

John

3 Answers

Hayden Evans
Hayden Evans
15,399 Points
Hayden Evans
Hayden Evans
15,399 Points

I believe it is due to the fact that the code for the widget on the site you provided is outside of

<div class="home-middle">

This div class must have CSS that aligns it in the center when put into this class. I would suggest looking at the CSS for this class and make such a class where this CSS is used for a desktop size (through media queries) and the default CSS for the widget (as it stands currently) for a smartphone size media query. Hope this helps or gives you some ideas!

John Gronley
John Gronley
137 Points
John Gronley
John Gronley
137 Points

Thanks Hayden!

Hayden Evans
Hayden Evans
15,399 Points
Hayden Evans
Hayden Evans
15,399 Points

No worries and welcome to Treehouse!

These are the following courses I recommend taking to help you with this issue:

HTML: http://teamtreehouse.com/library/html CSS Foundations: http://teamtreehouse.com/library/css-foundations

In the CSS Foundations course, you will find the sections on Selectors, Advanced Selectors, Flexbox/Multi-Column Layout, and Media Queries particularly relevant to this topic.