My landing page is not responsive

Code Feedback
1

Hi I 'am going crazy to make responsive my landing page but every time I make it good on the phone has completely changed the layout on the laptop

2

for now focus on width instead of height in your @media query. so it should be @media (min-width: 400px)

1 Like
3

thank you for the suggestion!

4

no worries. here is the documentaion about them CSS3 Media Queries - Examples .i advice clicking “try it yourself” and mess around with it, but for now take a break and come back. no reason to go crazy and fight the code :+1:t5:

1 Like
5

thank you, I will have a look later at this link you sent to me!

6

Hello Satia,

Going crazy because of media queries is totally valid. I experienced it myself too :sob: Making websites responsive is so hard at first. But we can still learn it, and be good at it someday with consistent practice :blush:

I first analyzed your pen. Then the result was there were some errors in HTML and CSS. You should go fix them first. I recommend the W3C validator as it’s easier to spot and understand the errors.

:pushpin:One of the HTML errors is that some tags are not paired like your first div.
:pushpin:In CSS, one of them is that you used “p1” as a selector. I searched it in your HTML document and I found out that you used it as a tag. p1, and p2 are not HTML tags. You can use them as a class tho under the paragraph tag so you can target them in CSS. For example:

<p class = "p1">
      We offer a choice of unique designs that can be customized. Please check our Gallery to see all the available designs.
<p>

Then in CSS, you can target class p1 by:

.p1 {
      position:relative; 
      right: auto; 
      left:-750px; 
      top: 350px;
      display:block;
}

However, I think you don’t need to add a class to target these paragraphs. Instead, do it this way in CSS:

section p  {
      position:relative; 
      right: auto; 
      left:-750px; 
      top: 350px;
      display:block;
}

Since both of your paragraphs have the same styles, the above CSS code can target them all at once.

For aiming for the right HTML structure, I suggest moving the content like the sections inside the body tag. The body tag is where content such as headings and paragraphs live; it’s like the content’s home, so please usher them inside :laughing: And having the right structure definitely helped me make a responsive page.

I noticed that you’re using a lot of divs. I think most of them are not necessary. For example, the logo image. You don’t need to put it inside a div. Image tag with a class of “header-image” is fine and enough (you can rename it to header-logo to be clearer) Another one is at line 11:

<div class="container"></div>

You don’t even have a style for it in your CSS.

I was taught to design mobile-first and I find it easier to make a page responsive as it starts with the content being only stacked on top of each other. Progressing to laptop and desktop screens, I begin to divide the content by laying out a two-column or placing the sections next to each other.

When I was doing the final project, portfolio, here were my breakpoints:

  • small screens (mobile): 320px-499px
  • medium screens (tablet): 500px-849px
  • large screens (laptops-desktops): 850px-1359px
  • larger screens (huge desktop monitors): 1360px-1920px

I based these off on guides from “Media Queries for Standard Devices” by Chris Coyier at CSS tricks, “What is the ideal screen size for responsive design?” by Shreya Bose, and “What are the best screen sizes for responsive web design in 2022?” by Shaun Anderson.

My media queries were defining the width of the screen. So the code looked like this:

@media (min-width: 850px) {
}

Any styles I added inside the media query will apply or display to a screen that has a width of 850px and above (or has a minimum width of 850px).

I hope my explanation will help you in making your page responsive :blush:

2 Likes
7

I think I l fall in love with you with this explanation…you make it much much clear!

8

You got some nice advice already.

  1. Don’t use fixed widths, in almost all cases that is the wrong thing to do. Use max-width to limit the width.

  2. Do not use positioning to do layouts unless the layout requires it (most do not). Use the normal document flow as much as possible. Use flexbox and CSS grid to help you create layouts, they both reduce the amount of media queries you need drastically.

  3. As was suggested. If you struggle to create responsive layouts try doing it in reverse. Create the narrow layout first and add complexity at larger screen sizes (usually referred to as mobile-first). It is in no way required, just a methodology and for beginners, it is usually much easier to learn as they do not have old baggage which can make the approach feel awkward (people that have coded a long time doing desktop first can find the approach unnatural and awkward at first).

1 Like
9

Thank you for your advice! next pen I will try to do from mobile-first as you and jkal_eunkyung have suggested!
I really appreciate all the help!

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.