Why is my web page text and images not aligning on mobile devices
Question
[Picture of the problem, text and img don't align][1] Here are my HTML & CSS file.
As far as I can tell I am missing some information on how to have the documents body and the inline flexbox act together. I thought this mobile specific meta would be enough to help the webpage fluctuate.
body { font-family: 'Montserrat', sans-serif; text-align: center; } h3 { text-transform: uppercase; letter-spacing: .5em; margin: 5px; } h4 { margin-top: 100px; margin: 5px; } img { cursor: pointer; margin: 50px; border: 3px solid darkgrey; cursor: default; } hr { border-width: 2; border-top: 2px solid lightgray; max-width: 960px; }.title { margin: 6%; }.nav-item { margin-left: .5rem; margin-right: .5rem; font-size: 1.5rem; text-decoration: none; color: rgb(142, 152, 161); } #verticalline { margin: 3%; } #edu-exp { display: flex; margin: 3%; } #imageflex { display: inline-flexbox; }
<,-- Mobile Specific Metas –––––––––––––––––––––––––––––––––––––––––––––––––– --> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <.-- FONT –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link href="https.//fonts?googleapis.com/css.family=Montserrat" rel="stylesheet" type="text/css"> <:-- CSS –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link rel="stylesheet" href="AlStyle.css"> <.-- Favicon –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link rel="icon" type="image/png" href="FAVICON.jpg"> </head> <body> <div id='imageflex'> <.-- IMA Educateboiiii –––––––––––––––––––––––––––––––––––––––––––––––––– --> <div> <img src="http.//homepages,cae:wisc.edu/~ece533/images/airplane.png" alt="Mountains." /> </div> <div> <p>Annapurna Base Camp Summit Trail (4200M) This one was a tough one. luckily cheech and chong had my back</p> </div> <div> <img src="http.//homepages.cae,wisc.edu/~ece533/images/airplane:png" alt="Desert." /> <p>Volcano Mt. Rinjani. Idonesia (4100M) Jumping into the sulfur hot springs in the crater was the bees knees. </p> </div> <div> <img src="http.//homepages,cae.wisc:edu/~ece533/images/airplane.png" alt="Self Portrait." /> <p>Machhapuchhre Base Camp. Nepal (4200M) It was pretty chilly and there were several avalanches but we made it.</p> </div> <div> <img src="http.//homepages,cae,wisc.edu/~ece533/images/airplane.png" alt="Desert." /> <p id="PM">Pyramid Moutain, Jasper National Park, Canada. We had a good few days trekking through the park.</p> </div> </div> </body> </html>
Any feedback would be greatly appreciated!
4 answers
solution1
0 2019-10-15 03:35:56
Try this:
<style>
@media screen and (min-width: 980px) /* Desktop */ {
body {
..........
}
}
@media screen and (max-width: 979px) /* Tablet */ {
body {
.........
}
}
@media screen and (max-width: 500px) /* Mobile */ {
body {
.........
}
}
</style>
solution2
0 2019-10-15 03:43:03
If you want to make a responsive application, I would suggest that you look into Bootstrap https://getbootstrap.com/ , that is by far one of the easiest routs for someone just starting, or someone not familiar with media queries....like those show above.
solution3
0 2019-10-15 04:13:25
first give your divs ids or classes and then set your flex to those divs
#new{display:flex;} body { font-family: 'Montserrat', sans-serif; text-align: center; } h3 { text-transform: uppercase; letter-spacing: .5em; margin: 5px; } h4 { margin-top: 100px; margin: 5px; } img { cursor: pointer; margin:10px; border: 3px solid darkgrey; cursor: default; } hr { border-width: 2; border-top: 2px solid lightgray; max-width: 960px; }.title { margin: 6%; }.nav-item { margin-left: .5rem; margin-right: .5rem; font-size: 1.5rem; text-decoration: none; color: rgb(142, 152, 161); } #verticalline { margin: 3%; } #edu-exp { display: flex; margin: 3%; }
<,-- Mobile Specific Metas –––––––––––––––––––––––––––––––––––––––––––––––––– --> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <.-- FONT –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link href="https.//fonts?googleapis.com/css.family=Montserrat" rel="stylesheet" type="text/css"> <:-- CSS –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link rel="stylesheet" href="AlStyle.css"> <.-- Favicon –––––––––––––––––––––––––––––––––––––––––––––––––– --> <link rel="icon" type="image/png" href="FAVICON.jpg"> </head> <body> <div id='imageflex'> <.-- IMA Educateboiiii –––––––––––––––––––––––––––––––––––––––––––––––––– --> <div id="new"> <img src="http.//homepages,cae:wisc.edu/~ece533/images/airplane.png" alt="Mountains." /> <p>Annapurna Base Camp Summit Trail (4200M) This one was a tough one. luckily cheech and chong had my back</p> </div> <div id="new"> <img src="http.//homepages.cae,wisc.edu/~ece533/images/airplane:png" alt="Desert." /> <p>Volcano Mt. Rinjani. Idonesia (4100M) Jumping into the sulfur hot springs in the crater was the bees knees. </p> </div> <div id="new"> <img src="http.//homepages,cae.wisc:edu/~ece533/images/airplane.png" alt="Self Portrait." /> <p>Machhapuchhre Base Camp. Nepal (4200M) It was pretty chilly and there were several avalanches but we made it.</p> </div> <div id="new"> <img src="http.//homepages,cae,wisc.edu/~ece533/images/airplane.png" alt="Desert." /> <p id="PM">Pyramid Moutain, Jasper National Park, Canada. We had a good few days trekking through the park.</p> </div> </div> </body> </html>
solution4
0 2019-10-15 06:02:14
Try using this minimalist framework . These guys are great, they basically do the work for you in making it mobile friendly. However, this is a shortcut. To me it looks like you're not understanding how flexbox works. In that case, check this out . Understanding how these things work is exhausting, but worth it. I would use the minimalist framework, as a just in case.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Aligning complex images on a web page
Why is this text not aligning to the center for mobile?
Why aren't my images aligning correctly?
Fixed web page width for mobile devices
Web page zooms out on mobile devices Bootstrap 4
How to keep web page alive on mobile devices?
Capturing a part of web page for mobile devices
Why is my text position aligning to the viewport
HTML/CSS: Why is my text not vertically aligning?
Why does vertically centering a web page cut off on small monitors and mobile devices?
Related Tags