Page Responsiveness

Preface

there are like. a billion ways to do this so i wont get into every thing you can do to approach responsiveness. the purpose of this is to present different methods and for you to choose whichever, or come up with your own way using this a sort of ~springboard~

keep in mind complete screensize responsiveness isnt just making a page look the same on all devices. it involves much planning and structuring your content as a whole to be mobile accessible. different methods also fit different types of pages! a gallery will need to fit different accomodations from a blog, etc etc. in this same vein, not every piece of information here will cover all the things a certain type of page needs to be responsive.

my biggest reccomendation is to look at your site on other devices (i.e. phone, tablet, etc.) to see how your layout is affected

p.s. ill move this disclaimer to the main page when i make it but this is all my advice and what ive learned. if i got anything wrong (which i probaby have kek) or you have additions let me know to improve the resource!

Not responsive

html width

by adding width:[your screen width in px (i.e. 1080px)] to your body, you can make your page look the exact same* on all devices!

this method makes it so every device with a screen width smaller than the width you set not affect elements that would otherwise be resized...below is a demo of what i mean

this box here is your screen and by resizing it youre emulating different screensizes. the boxes below are hypothetical pages, and react differently to being resized (check bottom right)

this box's width is 50%, meaning it will resize itself so its always 50% of the width of the "parent" (in this case, screen)
this box has a fixed unit width of 500px. its proportions arent affected by resizing and will always remain the same. when the screensize gets smaller than the size of this box, it makes a scrollbar pop up so all content can be viewed

by using this technique, your page will behave like box b.

applying this very is simple:

body {
  width: [set-width]px;
}

assuming you have some items that are affected by screen width, this simple fix will totally stop all the resizing and stuff from happening on devices with a screensize ≤ the set width.

this is good if you have a very detailed page, but keep in mind this doesnt make your page neccesarily pleasant to navigate/view. many of my older pages use this and when on mobile, youd have to scroll all over the place to read and navigate a page....its not ideal for accessibility. screensizes bigger than the width you set & it may not fully work depending on how you code your site* but it works!

* - note: if you have elements with the positon: absolute (most of the time) and positon: fixed property, results with this method will (probably) be reallyyy shit.
the accompanying properties top, left, right and bottom use the screen size as reference (most of the time) and will show in ways not desired, sometimes obstructing content. theres ways to get around this but its better if you limit the usage of these properties not just for this but in general (advice from someone clinically addicted to both of these)

Semi-Responsive

margin: auto

Responsive

html width

@media

this one will probably take the longest to impliment but if you want your site to be very accessible to mobile and all, this is what you want to do!

im not gonna explain what @media is because its only kind of important, but heres the w3school page and mozilla dev reference, read if you so please. basically it detects attributes of a device. most importantly, in our case, screen size.

inside the selector @media and screen (max-width:[size]), we can put other rules inside of it, like this

in this example, normally, the main section would be 800px and the nav would be 500px and display as a block (the default property its given) (difference between block & inline). but, now, as addressed in the @media declaration, when the screen size cannot be bigger than 1000px (screen size ≤ 1000px), all the rules inside its declaration block are put into effect. (heres a better demo lol)

in this case, the main elements's width will now be displayed as 100%. nav will also be 100%, and has been given the display: inline which will override its default.

@media screen and (max-width:1000px) {
    main {
      width: 100% !important;
    }

    nav {
      width: 90% !important;
      display: inline;
    }
  }

  main {
    width: 800px;
  }

  nav {
    width: 500px;
  }
}

this depends on where you put this line of code but for everything affected by the @media rule, but add !important after all the previous

all the rules inside of it will only apply when the size of the screen is the set size. this allows for many possibilities and is the best way (i know of) to format your site to be mobile friendly.

a live example ill show is my dreams page. if youre on desktop, try resizing the screen. youll notice the left column dissapears, the header is reformatted, etc.

this goes very nicely with flexbox (which if you havent learned u should)

this is an example of how this could be used to change a layout based on flexbox. the flex-direction is changed from the automatic row it has without specification to column, meaning that the flexbox will stack the items inside vertically instead of horizontally. because the desired effect for mobile compatibility is for everything to be vertically stacked.

@media screen and (max-width:1000px) {
    .flexbox /* FYI this is the flexbox parent/container */ {
      flex-direction: column;
      flex-wrap: wrap;
    }

    main {
      flex: 100% !important;
    }

    nav {
      flex: 100% !important;
      display: inline;
    }
  }

  .flexbox {
    display: flex;
  }

  main {
    flex: 80%;
  }

  aside {
    flex: 20%;
  }

soo, yes, what i think is best to achieve screensize compatibility is to reformat your entire website to be easier to navigate this way. this can be easy or hard depending on the complexity of your website and how its coded already.

again, if you arent already using flexbox and you have any kind of multi columned or stacking layout, switch to that for an easier life
for uneccesary details that obstruct content on mobile/are purely decorational but make the mobile viewing inconvinent in any way, my fix is as follows:
1. make a 'hidden' class that makes everything with the class dissapear when the screensize is ≤ 1000px (or whatever works best for you)
```
.hidden {
    display: auto;
  }

  @media screen and (max-width:1000px) {
    .hidden {
      display: none;
    }
  }
                
```
2. then just give the .hidden class to all items that you want to dissapear and that should be it! keep in mind you can also give certain things custom classes/ids and within the @media rule, move it around (using transform: translate
as mentioned in the intro, complete mobile friendliness is directly affected by the layout of your site itself. it cannot be achieved with just css, but html structured in a naturally adaptable and intuitive way. make sure your layout is following a clear, linear hierarchy