Creating a Simple HTML Coming Soon Page with One Image-CodePudding

I need to create a coming soon page. I know some HTML and CSS and all I need to do is add an image to this page, while also trying to make it responsive. And that's where it gets difficult for me.

I can easily create a page and add the image and centre it, but to then make the page responsive, especially when the image is 2049x1152, is where my skillset cannot take me.

CodePudding user response：

To make the image responsive you will have to specify width and height of 100% and auto respectively.

In your stylesheet add the following

img {
  width: 100%;
  height: auto;
}

CodePudding user response：

Here are some tips that will decrease your responsive design headache:

Rule One: The web page is already responsive as it is working on all screens and any

Second: Start with global styling like body and headers and then go to the other elements to handle special cases.

Third: Avoid fixed sizes. In other words, if you want to make the dimensions of a div as 100px width and 50px height then do not make the styling in this way:

div{
    width: 100px;
    height: 200px;
}

It is better to use rems and ems. And even if you decided for any reason to use fixed sizes, then take this advice as a rule of thumb:

For most cases, when the screen size decreases, we need the elements to decrease its width and increase its height.

To make this rule effective in your code for the fixed sizes, give the elements max-width: 100px and min-height: 50px

so when the screen size changes, the element will not stick to the fixed size and its dimensions will be flexible to fit the screen size. So the above code is better to be written as:

div{
    max-width: 100px;
    min-height: 200px;
}

Fourth: Use media queries to add complexity which means instead of writing the main style for the large screens and then writing hundreds of media queries to handle small screens, you can make the original styling for the small screens and then write only one media query to handle the large screens.

For example, if we have 3 divs that I want them to appear next to each other in large screens while appear in a vertical way in small screens then instead of doing it like that:

div{
    display: flex;
 
}

@media(max-width: 40 em) {
    div {
        display: block;
    }
}

It is better to write it just one time like that:

@media(min-width: 40 em) {
    div {
        display: flex;
    }
}

And both of them will give exactly the same result but notice the difference between using max and min width in the previous example.

Note: The breakpoint at 40 em works in most of the screens but you do not need to stick to it, you have to go back to your designer and make use of his opinion to handle more test cases.