Website Row Issue

[Kristo]

Okay so,

Last time I messed all of this up. I am now down to redeem myself by actually providing a JSFiddle link. I have the top row in this example but there is one image on the bottom and no matter what I change I cannot move it to the top row. I would like to have all those images (They don't show up as they are local to my computer - Just run of the white boxes with x's) on the same line along with the text that is associated with them.

You must be registered for see links

Regards,
Kris

 

[JayC]

li{
width: 5% !important;
}

 

[Kristo]

li{
width: 5% !important;
}

Thanks for your input but this did not change it (in fact shrunk everything else)

You must be registered for see links

 

[Weasel]

Please stop marking answers as "best answer" if it doesn't actually solve the problem. This causes confusion.

 

[JayC]

Thanks for your input but this did not change it (in fact shrunk everything else)

You must be registered for see links

Well if you want to fit 5 per line.. then you need to make them smaller.. You adjust the 5% to the percentage you want that will fit all 5...
 

@media (max-width: 550px)
(index):130
#rig li {
    width: 50%;
}

You're setting your width to 50%.. This means 1 box takes up 50% of the div... which fits 2 boxes per section...

So if you're following CSS you need to shrink all of your widths evenly. If 50% is 2... 25% = 4, and 20% = 5

Which means your code should read:

 #rig li{ width: 20%; }

and you don't need to use media on an inner object. That makes no damn sense either.. percentage means how much of the current div or window to take up.

If you set your main div = 100% , then it will take up the width of 100% of the screen, meaning everything inside of that div will then go to the parent object, so when you adjust these widths based on the screen size - you're really making it smaller than what it should be.

THIS IS HOW I WOULD CODE IT:

You must be registered for see links

 

[Kristo]

Please stop marking answers as "best answer" if it doesn't actually solve the problem. This causes confusion.

I am not stupid -_- This was marked as the best answer by myself because FUNNILY ENOUGH it was the best answer and solved the issue :l Whats the point in me using it if I am going to be criticised FOR using it...

 

[Weasel]

Thanks for your input but this did not change it (in fact shrunk everything else)

You must be registered for see links

I am not stupid -_- This was marked as the best answer by myself because FUNNILY ENOUGH it was the best answer and solved the issue :l Whats the point in me using it if I am going to be criticised FOR using it...