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 Adam Smallman
Adam Smallman
4,182 Points

UL to stay in inline-block in screen resize.

Hi guys, I am having an issue with trying to get an ul to stay in inline-block when the screen resizes.

<ul>
<li><div class="block01"></div></li>
<li><div class="block02"></div></li>
</ul>

These have a few css on them such as block01 and 02 to be some px width and some height px. The UL and LI have also the display: inline-block on them.

So when the browser is resized I am trying to get the ul divs to shrink with the browser window staying in an inline-block. Would bootstrap help with this? Or is there an easy way to go about this?

Thank guys, hope this makes sense!!

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Instead of using a div inside each li could you not use a span tag which is inline by default

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

or try 

div.block001,
div.block002 {
    display: inline-block;
}

To change the div from block element

4 Answers

Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

I have tried that erm i will send you a link of what i mean

http://www.jonathandacosta.com/work/

As you can see when you resize the browser the images shrink to fit flush with the side of the browser.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Could i get a look at your code please. Can you host what you got so far somewhere or put it in a codepen.

Can have a looks whats going on then if i can see it in context.

Nice link btw

Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

http://brothersindesign.com/#

Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

as you can see when you resize the browser the ul is not inline block any more. but if you resize the browser past the images the images shrink but i want them to shrink inline block flush with the browser

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Well looking at your code you have no media queries telling the browser what to do when it gets to a certain size. If you don't understand media queries then i would recommend the Build a Responsive Web Site videos on here to get a better understanding of what you need to be doing.

Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

I have sorted it. instead of (display:inline-block;) i put (display:table-cell;)

but now i have a new problem, if you have a look when you shrink the browser the blocks brake up. any ideas??

http://brothersindesign.com

remember to refresh the page

Thanks for your help

Chris Dziewa
Chris Dziewa
17,781 Points

You may be able to try using gridulator to make layout much simpler. I agree with Adam Sackfield that you should learn responsive design with Allison Grace. A simple grid and some media queries would make this a lot easier. Right now though instead of using pixels for your image boxes, try setting a container div around everything at a fixed pixel width, and set the image widths to percentages so that they reduce fluidly as the window is resized.