Hi!
I am trying to complete my assignment which requires the creation of a responsive web design using media queries for the following ranges of the viewport widths:
(>=992px)
b/w 768px and 991px
<= 767px
Since we are not allowed to use any layouts or frameworks for the assignment, I cannot use Flexbox, Grid or Bootsrap to achieve the prompted results, and had to rely on traditional methods only.
The only problem is that the code is responsive to the change in viewport width at ALL points except 767px and 991px.
Here’s the link to my webpage
and the associated code.
I would be greatly obliged to you all if you could please help me out with my predicament.
Thanks & Regards,
Vibhuti
I have checkd your code and there are like two things you should keep in mind when writing CSS code.
The @media must come after all CSS code inside the stylesheet;
When using @media, you always have to specify the devices on which your webpage would be available, as follows: @media all and (max-width: 767px). You have to add all inside every @media query you want to use.
Also, there is a typo inside one of your @media queries:
You wrote it like this
@media (max-width: 767px){
.items{
width:calc(100%-40px);
margin: 20px auto;
}
You necessarily need a space around the minus sign inside the calc function.
Thank you so much @Arskeliss for taking time out to go through the code for my assignment and suggesting some very indispensable features that I missed out upon.
Unfortunately, even upon making the suggested changes, the above mentioned problems still persist at the breakpoints of 767px and 991px.
I have attached below an image of how the problem is presenting itself at those values of the viewport width:
@media all and (min-width:768px) and (max-width:991px){
don’t do this, but put the media queries in order
you could go bigger to smaller
and put first the code for the biggest screen, and then the two media queries, first for medium then for small, using max-width
you could go smaller to bigger
and put first the code for the smallest screen, and then the two media queries, first for medium then for big, using min-width
Hello!
Thank you for taking out time to reply to my query. : )
I made the suggested changes on my local computer and launched it using the conventional technique of the live server in VSCode, but unfortunately, the breakpoints are still creating trouble as mentioned.
: (
