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 trialFavour Uche
3,551 Pointsthe third picture on my portfolio on mobile version is not stacked correctly
after adding the view port tag, I tried opening the website in my phone but the third picture on my portfolio is moved to the far right . so it is supposed to be 2 pictures side to side but in the second row, it has only one picture because the third picture is pushed on the far right. Can anyone help me with this please :(
1 Answer
Jonathan Grieve
Treehouse Moderator 91,253 PointsI'd probably need to see the HTML, or a link to somewhere where you have published the code you've done so far. But if the images are being pushed to new rows etc then it's probably because the browser doesn't have enough space on the screen to display them where you want.
Remember each element on the DOM has to account for border width, margin space, padding space as well as the space of the element itself.
What I tend to do at times like this is to open the browsers DevTools, examine the elements and test the width values that will display the elements properly.
Hoping this helps you.
Jonathan Grieve
Treehouse Moderator 91,253 PointsIt seems to be as I suspected. Some of the text is pushing your subsequent list elements down and the browser is doing the best it can to make space. That's why it looks like there's nothing there where the third image should be.
I got around this by adding a specific height e.g. 40px
to the following selector.
#gallery li a p {
}
You may also have to look at your individual images and make sure they're all the same size. It might be that that needs tweaking or that something in the CSS is causing some of the images to vary in the sizes that they're displaying.
Good luck with it. 😊
Favour Uche
3,551 Pointsso I don't know how to thank you but i'm really grateful. the text from the first cake picture was too long so it pushed the third picture out. I just erased the text and added a shorter text and it worked like magic. Thank you so much for taking your time to respond.
Favour Uche
3,551 PointsFavour Uche
3,551 PointsThat is my responsive css