Neocities

oceanfront

5 months ago

ive been trying to make my site responsive for awhile, but its just not going my way.. ive switched everything to using %, and my nav section turned out perfeclty, but everything else is awful T_T?? send help.. https://imgur.com/a/yzNFdZV

5 likes

kingdomofakibaten 5 months ago

Hellooo :3 looked at your code! The main issue stems from how you position things on your website. you are manually positioning articles using margins but for responsive design this isn’t ideal because while visually your website is broken up into different sections, the browser can’t see that and oesn’t know how to scale things :( outside of the header at the top, there are three columns with the left and right

1 like

kingdomofakibaten 5 months ago

lets take the left column. If we put that in its own div with a set width we can add stuff and everything will still be top down with space in-between and trapped inside the same width and your browser knows how to scale or what to scaled relative to. Also I would recommend taking all uses of pixels out and replace it with em, %, or vh/vw

kingdomofakibaten 5 months ago

Sorrryyyy that was really long explanation. I did exactly what I described on my website using flex boxes with a center section and two columns on each side of the same with (so like the exact same) please feel free to look at and take my code and use it and reply if I didn’t explain anything well >.<

oceanfront 5 months ago

@kingdomofakibaten thank u very much but ... that pic isnt actually referencing my current code .. it was for my wip in visual studio (o╭╮o) 🥺 im sorry

oceanfront 5 months ago

https://pastebin.com/E0nyWmr6 this is the actual thing i was working with >.< i feel so bad haha

kingdomofakibaten 5 months ago

i see sorry about that >w< I looked over your code and I think for responsive design there are two places you can start: switch all px to rem (which is px/16) and consider implementing a more organized layout in the code. Right now everything inside mainBox is positioned relative to one another and all have the same parent (mainbox) this means that If I delete navBox or any article everything moves.

kingdomofakibaten 5 months ago

there is already a somewhat defined colum layout for your site. You have a big center column and a colum on each side that are the same size we can still use mainbox here but then we can separate all the articles on the left into a div class = left and same for the center and the right and then define how each of those is positioned relative to one another (the best way here is usually flex)

kingdomofakibaten 5 months ago

we can define the width of lets say the left column and now something like navbox is only positioned relative to whats about and below it because div class = left is already positioned relative to the center

kingdomofakibaten 5 months ago

This way if we delete navbox it will only remove it from the column but because the column has the same width nothing else on the page moves except whats below navbox gets moved up. I implemented this on my website using flex if you would like to look :3 it makes everything much easier to work with and less precariously positioned because an element is positioned relative to one thing instead of a bunch of things

ninjaweb updated Ninjaweb

5 months ago

eternal.html

synthesis.html

11 likes

popisbubbles updated Popi's Bubbles

5 months ago

musicroom/musicroom.html

home.html

4 likes

birdtree updated birdtree land

5 months ago

birdtree land

4 likes

vibequest 5 months ago

I carried a bunch of nuts and cones and they slowed me down. I buried them and it made me sing. I ate a nut and I was stuffed, then I shared one with a nuthatch, and fell asleep on a branch. 10/10 squirrel game update.

4 likes

ghostingpen updated * GHOSTING PEN

5 months ago