Quick Links

× Go2Top Go2Middle Go2-para8 Go2-bottom http://0awesom3.fun naccann
sky.02

Responsive Columns and 'Old-School' {Lycos} Buttons

This page could have also been called: 0awesom3's Third Help Page - OR - Tutorial on responsive columns via CSS styling and resizing

Scripture
Cool Index
About Computers
Thanks4Coming.01
Thanks4Coming.02
Contact Us
A Real Index
    OF NOTE:
  • Ordered Lists
  • can easily
  • become buttons
  • and links.
  • They are scalable
  • costomizable
  • and require
  • much less code.

    You do not have to... release - the menu! ☰

  • You can also change {mix} column types or 'classes.' For example, different small and large screen versions {col-5 and col-s-9} were used on this block. That layout worked. However, it was causing problems after a few other style changes... So, instead - this was changed to col-5 and col-s-5. The 'sub-class' was changed to an aside2.
  • did you expect to happen on this row?
  • did you expect this block of text to show up?
  • can you change its location?


    • For a combination col-5 and col-s-9: on a large screen it will occupy 41% and on a small screen it scales up to 75% of the screen's visible space. The combining of col-8 and col-s-12: calls for 66% and 100% of the sreen's visible space. So, this block goes here (it requires 66%) and cannot go on the previos row. I tried float left and a few other things that I thought would have pulled it under column 1. You might be considering this region as (col-3) if you are using the page's css naming convention.

    I speculated that putting two less buttons in column 1 would have made it short enough for a (col-8) block to fit all the way against the left margin. This was because two less buttons made column 1 the same height as the two colums that succeeded it (col-4 and col5). Again, although this worked, other style changes required removing still three more buttons to arrive at the current state (seven buttons). Given that {aside} is defined in the [head], be prepared for a relatively stupid monologue in the next column.

    That 66% block appears against the left margin currently with a screen of 800px; so - I am assuming at least one of your theories was correct, sir. This 33% column (col-4) should 'butt' against it when working properly. This column should be thought of as more of an 'aside.' I do not know what some of these extra class delinations do... Or rather, what classes and styles are 'baked-in' to the afore mentiond name {aside}. This is a good time to say at some point, "You should examine the external w3 style sheets. You know the ones that you are refrencing in your [head]."

    I would say this is especially true for ul and li list properties. On more than one occasion, I have found myself making [hr]'s with 200px padding to act as a buffer so that text does not overflow into the next section on screen re-size. Some script error made me start over {a few corrections ago}. This page was better off but, it is what is - backup your work! Fare well, itt is past time for me to go...

    To test these theories, resize the browser window to see how the content responds to the resizing. Furthermore, you should pay attention to the way you have 'told' small and large screens to behaving.

    I think you are coding the opposite of the desired behavior. For example, you want colums to get more wide as the screen size goes down. So, they have an inverse relationship, right? Oh, and adding [p]'s can override this [footer]'s default 'class'. Interesting, because both propeties are styles defined in the head.
    Jump to: Go2Top Go2Middle Go2-para7 0awesom3 naccann superiorchoice jmg