Mobile and pc web layout

Question

https://code.sololearn.com/WjCbiu7P5wel/?ref=app

How can I rearrange this site so that for pc view(layout), the paragraph one and two blocks are on the left while the paragraph three is on the right. So that they are beside each other.
And the footer is at the end of the page as is in this mobile view.
So that this mobile view does not become distorted.
I've seen a website where it was done but I don't have an idea of how they did. Also, they didn't use viewport.

Answer 1

Using media query max-width or orientation, a quick edit on your code as demo:

https://code.sololearn.com/WAJMRgCUxQAy/?ref=app

Here are some resource about media query

1. Basic Understanding at
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

2. Cool pratical ways at
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

3. Full details, especially the browser compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Answer 2

//You need to use CSS media queries. I will link a site to learn about it

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 3

I'd suggest to use vw (viewport width) as your standard dimension unit. It roughly looks the same on mobile and pc. Just change the px values to a vw value.

Answer 4

Thanks very much for the help.

Answer 5

@gordon your file attached doesn't give the picture of the pc view I described.
I believe I didn't describe it well.
But here is a site whose mobile view is very different from the pc view.

I just want to know how they arrived at it.Is it still media query?

https://code.sololearn.com/WNBpsYil18g9/?ref=app

Answer 6

yes, basically it is media query, for handling different screen size.

have you read the css-tricks link?

Answer 7

Yes, I've read it. I've understood it now.
Thank you very much. I've been stumbling on that problem for long now.