Mobile and pc web layout | Sololearn: Learn to code for FREE!
Novo curso! Todo programador deveria aprender IA generativa!
Experimente uma aula gr√°tis
+ 2

Mobile and pc web layout

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.

24th Jan 2020, 12:43 PM
Fasasi Sherif
Fasasi Sherif - avatar
7 Respostas
+ 3
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
24th Jan 2020, 1:05 PM
Gordon
Gordon - avatar
+ 1
//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
24th Jan 2020, 1:00 PM
Sudarshan Rai
Sudarshan Rai - avatar
+ 1
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.
24th Jan 2020, 2:07 PM
Jannik M√ľller
Jannik M√ľller - avatar
+ 1
Thanks very much for the help.
24th Jan 2020, 4:36 PM
Fasasi Sherif
Fasasi Sherif - avatar
+ 1
@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
24th Jan 2020, 4:44 PM
Fasasi Sherif
Fasasi Sherif - avatar
+ 1
yes, basically it is media query, for handling different screen size. have you read the css-tricks link?
25th Jan 2020, 12:33 AM
Gordon
Gordon - avatar
+ 1
Yes, I've read it. I've understood it now. Thank you very much. I've been stumbling on that problem for long now.
25th Jan 2020, 6:04 AM
Fasasi Sherif
Fasasi Sherif - avatar