w3.ccs -

[Jorgensen]

hi

i'n new here - i have done homepage designs on and off for the last twenty as a hobby (i'm no a programmer), mostly using serverside php and the tabels for building the side at clientside.  

it's now time to update the company site, and that the mobiles has come into the scene i have searched the net to find out how to set flexible sites, and i'ts my impression that i can do a lot with w3.css. 

but as this is all new to me i have got some problems / questions. 

i use a <div class="w3-row"> to display some items, and every item is in their own <div  class="w3-col l4 w3-margin-bottom">

but if one of the items has more text than others, then the layout jumps around. 

i'm sure the is a way to avoid this, and that it's quite simple - but i just cant figure out how :-(

can anyone help? 

thanks
jorgensen

[dsonesuk]

The w3-row should wrap the three images, and extend height wise to highest content, with the second row doing the same, it should not allow image containers to butt to bottom right edge of element with largest content above it.

[Jorgensen]

ah ok, - so if i understand you correct, this is intended, so images can have different heights.

so it seems that setting a specific height for all items solved the problem.

thanks dsonesuk

jorgensen

[dsonesuk]

You shouldn't need to set the height? it becomes less responsive by doing so?

Imagine looking down inside the top and bottom row of a box, these row boxes should extend to the highest content within them (img with lots of text). The bottom edge of box row is straight, so the row below it will have no option slide to left most edge.

But! if box row collapses to nothing, which is usually caused by items inside box row being floated, the bottom edge is now bottom of items and there different heights and now jagged, the box will slide along to lowest item height, until it hit higher item and stop. now it is stopped three quarters of the way across, the last item can't fit, so it moves down to what looks like another row.

This is what I am seeing, but! w3css styling should prevent the outer box row collapsing, and therefore prevent this. can't tell unless we see code itself.

[Jorgensen]

hi dsonesuk

i'm sure it's not the best solution and it somehow compromise the flexibility, but i think, that i for now have to use the flexible version for now and then go back later to optimize the page. 

thanks
jorgensen  

[Jorgensen]

hi dsonesuk

i can see it's very inflexible to set a specific height on the items, but do you know if there is a flexible way to achieve a 'grid' like the one i try to achive? 

thanks
jorgensen

 

[dsonesuk]

Like I said, it shouldn't do that! I need access to code to identify why its doing that! Without it! It will be game of guessing, with question after question, which I'm not prepared to do, So I can't proceed any further with this topic.

[Jorgensen]

hi dsonesuk

oh - sorry - you can see a copy here:

http://mejeriet.dk/2018/

thanks

jorgensen

 

[Jorgensen]

i have an other issue - when i copy the site to our server on the network, for internal testing with colleagues, some layouts messes up in internet explorer - no difference in chrome.

it's like the css somehow messes up. the links are blue - the black logo is not hidden as it should bee (only visible on the white background). and most of all - the "nyheder/new" shows as single images in a column, and not as four columns. 

i guess i have messed up some code :-/ - but it's strange to me that it only happens when the site is copied to our server and not when i run it local, or if i upload to our domain. 

thanks
jorgensen

 

 

[dsonesuk]

Well that's Internet Explorer for you, the most ultimate disappointment of a browser ever known, especially if its below 10 version. Even MS Edge has some issues.

Edited September 19, 2017 by dsonesuk

[Jorgensen]

I know internet explorer is a headache, but that the exactly same page / files displays that different on two different locations really surprises me 😕

Edited September 20, 2017 by Jorgensen

[dsonesuk]

Correct all 149 errors found at https://validator.w3.org/nu/?doc=http%3A%2F%2Fmejeriet.dk%2F2018%2F then come back if problems still exist.

[Jorgensen]

thank - i will do :-) .... only 149....

[Jorgensen]

hi dsnokesuk

i found the problem - i simple needed to add a </div> and a new <div class="w3-row"> after every three items - doh quite simple - but i have overseen it. 

jorgensen