Assessment wanted for Media Queries & Responsive Web Design task

MDN Learn
#1

Hello,

I have attempted the assessment and i believe my webpage looks similar to how it’s meant to look.

I tried to use media queries but it didn’t work at all and had no effect on the webpage. Would appreciate some pointers on how I could use media queries on this webpage to make it responsive.

Also if you have any feedback on how I could optimise my code I would love to hear that.

Here’s the code, I inserted a comment showing where the CSS code I typed starts:
https://jsfiddle.net/t4znswq7/

Thanks!

#2

elslamo alikom @Ahmed1

you doing great and you very close
i will give you some hints

  1. try to resize your browser window you will notice that you get a horizontal line which is not good thing from users experience point of view
    imagine yourself need to scroll up and down and left and right

  2. you could use media queries so at small screen size you make the aside element to display as footer ( do not change the element tag just it’s looks )

  3. you could make the nav element to display vertical not horizontal and below the title div

hope those points give you some idea about what to do

let me know if i need to explain my self in better way

and happy coding and have a nice day :slight_smile:

#3

Salaam :slight_smile:

I’ve tried to add the media query, this is what I’m using to make the sidebar responsive:

      @media screen and (min-width: 550px) {
    .sidebar {
      display: grid;
      grid-template-columns: auto auto;
    }
  }

but it’s not changing the code in any way sadly :frowning:
I would like further help with that please.

#4

could you share link to your code as jsfiddle change the link with each save
you can say it keep version of the code

and you welcome :slight_smile:

#5

Ahh of course, here’s the updated jsfiddle, i put a comment “revision1” of the code I just added:

https://jsfiddle.net/oubsed41/

Thanks!

#6

i see there some confusing of understanding grid

when you set the aside as grid display then those attribute affect it and there child but in the aside case there only one child p in that case so no matter what you do to it using grid it will make it show up on the lower side of the screen

so you have to look up to see which tag/element you want it to show up below it and see what their common parent

best way to learn grid that you draw a table then on each cell you write the name of element you want it to show up then modify your grid setting to do what you need

same thing for flex but study it’s axis and attribute to know which attribute affect it in which way

i do not want to give you the solution so it would be better to get it to make you better know the concept behind it

#7

Yes so I’ve targeted the .sidebar class because the child of it is the p element and I want that to be flexible based on the available space the webpage has.

I mean I can find the solution for this online I just don’t understand why it isn’t working so would appreciate an explanation on why it isn’t working and what I need to specifically change.

I should’ve used

display: flex; flex: 1;

but I’ve also tried that and it hasn’t changed the webpage

#8

that the spirit

now let us take t step by step

when you set the sidebar to grid it tell the browser that this sidebar is grid so it only affect that sidebar and it’s child it has no effect on it’s parent or sibling

and the sidebar child will be displayed based on the grid setting you set like 2 coloum 1 row or auto or whatever you set but that position is related to what ? and another question where the sidebar itself will be displayed?

the answer it will be related to what sidebar already are for example if side bar was in the right side on the screen then sidebar will stay there but the child of it will arranged itself on that right side based on attribute you set for the grid

Screenshot from 2021-10-03 20-55-34

so the side will stay on right cause the grid on the sidebar affect it’s child not it’s sibling or parent

but what we want to achive here we want to make the side bar to display under the main (more precisly in our case under the article ) in that case so we need to check the common parent of article and the aside which we found it’s the main

so if i removed the main selector and moved it to the media selector like bellow

@media screen and (min-width: 43em) {
  main {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 20px;
  }
}

i used the em as it better to make it more responsive than to get it to px (remove your main selector from non media area)

so it tell the browser to display the sidebar as next to article is size is above this 43em and if not then there no grid so what the layout will be used it will be using the box layout which make the sidebar to display below the article as it block element

so think of the nav in some way to make it show up under the title in smaller screen size

let me know if my explanation is not good or if i should explain it in a better way

at first layout and how many layout interact with each other could be confusing at the beginning but the more you played with it the more it become fun and you will master it

and have a nice day :slight_smile:

1 Like
#9

Hahah i like your way of explaining.

This made a lot of sense to me, i was targeting the wrong thing and now I understand it, I need to target main as I’m trying to move it’s child elements :slight_smile:

I managed to fix my code now and I think it looks very good, here it is if you want to have a look: https://jsfiddle.net/5e2c7qL9/

Thank you very much for your help @justsomeone
I’m also looking to help out on a html/css project to improve my skills more and if you know of any that i can be apart of, please let me know :smiley:

1 Like
#10

thanks a lot
my draw is awesome also :laughing: hhhhhhh

that very much better but there still some room to make it better it about the grid try to resize the result window on the jsfiddle you will notice that when you increase it . it has only one coloumn for the card which should be 2 or 3 depend how much you increase the size

also when you decrease the size do not make fixed width make the width shrink and the height increase so it does not look as if it was in portrait mode

for the project while you surf the internet try to do page of what you see maybe not the full page maybe part of it
and see how it work there also more courses online so maybe they have some tasks you can try to implement

hope that help and have a nice day :slight_smile:

2 Likes