Jump to content
Jorgensen

w3.ccs -

Recommended Posts

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

Capture.JPG

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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  

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

1.thumb.JPG.01a37bba51d748e7d54b030123411cef.JPG

 

 

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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 by Jorgensen

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...