Newbie trying to learn flex. I'm trying to make this responsive across all devices hitting on some just missing on others according to google inspect tool. Followed advise on one post I saw and it got me this far. attached is my html and css. I've tried different combinations of flex x x x but no luck so far looks fine on my laptop screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div >
<h1>Sci-Fi Blog</h1>
<h3>dedicated to the Star Trek series</h3>
<div >
<ul>
<li>About</li>
<li>Resources</li>
<li>Other Sci-Fi series</li>
</ul>
</div>
</div>
<div >
<div >
<div >
<h2>Star Trek TOS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTPdHkIFqZgTABvQtjcCnKr6mbWNfKBVDRRw&usqp=CAU" alt = "Pic of space ship">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna. In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam. </p><a href="#"> <button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--div STtos-->
<div >
<h2>Star Trek TNG</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQueIPqKDTgGH9_SaYzT7u9cfpvKs2P48l5dg&usqp=CAU" alt="pic of space ship">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of STTNG-->
<div >
<h2>Deep Space Nine</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKvwoJTvGIl2Nq2RzDKkf7OrgfVoHwrXP82A&usqp=CAU" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--DS9 -->
</div> <!--row1 -->
</div> <!--container1-->
<div >
<div >
<div >
<h2>Star Trek TAS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwdlJfrFrcj7KJRdTADDtsfjGa0SQweeu0fQ&usqp=CAU" width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of TAS-->
<div >
<h2>Voyager</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiV6QTXDR7lD9uvx8S-IuTClS-CV6COgSh1g&usqp=CAU" width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of Voyager-->
<div >
<h2>Enterprise</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4Iz2D0_InBOZg4Wi_PWAT-1lEqxI0AExPg&usqp=CAU" width="259" height="194" alt="pic">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna. In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div>
</div> <!--end of row2-->
</div> <!--end of container2-->
</body>
</html>
body {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSzBDemswC2Gg3mbDR7t8mQ53jByPChDtA5w&usqp=CAU');
text-align:center;
background-size:no repeat;
background-size:cover;
height:310px;
color:white;
margin-bottom: 150px;
margin-left: 5px;
margin-right:5px;
}
.header h1 {
margin:0;
}
li {
list-style-type:none;
display:inline-block;
padding: 10px;
}
.menu ul {
text-align:center;
display:inline-block;
padding: 0px;
background: rgba(197, 228, 183, 0.8);
}
.menu {
display: inline-block;
margin-left: 10px;
}
p a {
display:inline;
}
@media screen and (min-width:640px) {
.row1 {
display:flex;
justify-content:space-evenly;
grid-gap:10px;
}
.STtos {
flex: 0;
}
.STTNG {
flex:0;
}
.DS9 {
flex:0;
}
.row2 {
display:flex;
justify-content:space-evenly;
grid-gap:10px;
}
.StarTrekTAS {
flex: 0 0;
}
.voyager {
flex:0 0;
}
.Enterprise {
flex:0 0;
}
}
CodePudding user response：
We often talk about something being responsive as if it is a binary condition (as if it is or it isn't), but really there are tons of ways your site could adapt itself to different screenresolutions or classes of devices.
Currently, if we ignore your header/menu (which seem unrelated to the issue), your site contains 6 chunks of similar types of content. You've wrapped those into in 2 .rows containing 3 each, i suspect this is a mistake (more on that later) but it makes sense if you look at the site through the lens of your laptop browser.
When the site is displayed with all 3 items side by side, it looks great on fullsize desktops (which includes your laptop i guess), because the @media { ... } block in your CSS, is in effect. The styles inside that block enable flexbox and make it look probably more or less like you had in mind.
When you shrink the site down though, beyond the cut-off point of your (only) @media { ... } block, all the styles in that block are de-activated, and the browser falls back to rendering them as-if you had no CSS at all. Now, that default style isn't actually -too- bad for say a phone, but it's not what most designers (including you) are likely to want.
The likely desired result (i suspect) is that your site looks more or less like it does on desktop right now (2 rows of 3 columns), but once the screen gets smaller it should responsively turn into a 2-column and finally 1-column layout.
The main problem lies in the CSS, instead of having all your styles inside the one @media { ... } block and flicking that on/off like a light switch, you want most of your styles to be generic and then have a minimal amount of specific styles inside @media { ... } blocks for the different situations.
Let's remove most problems first, then re-create them; let's delete the following line, and everything under there in your CSS:
@media screen and (min-width:640px) {
Next, we'll look at the HTML. While not strictly wrong perse; the 4 names container1, container2, row1 and row2 aren't very useful as classnames. ids are for uniquely naming things, classes are for labeling stuff that is similar to other stuff. The later case is what matters to us at this moment.
Lets change both container classes to just container and the 2 rows to just row (eg: remove the numbers).
Next, the 6 startrek <div>s all have unique classnames (like ) change those 6 to being ids (like id="STtos") and also assign all 6 <div>s a shared class (so now they'll look like: <div id="STtos" >).
Now, there is one more problem in the HTML, but we'll get back to that later, let us re-create some CSS now.
We want the .rows to be flexboxes (which contain the .contentitems):
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
And then the 6 .contentitems themselves, for simplicity for now, let's define each as needing 200 pixels of width, not allow them to grow when there is plenty of room (first 0) nor allow them to shrink if there is little room (second 0):
.contentitem {
flex: 0 0 200px;
}
Now test it out on your laptop, that should be pretty much identical to before with 3 columns.
Now shrink the screen too a very low width -> it'll wrap to only 1 column.
Now scale back up a little so it wraps to 2 columns.
Here, you'll see the effect of the last problem i ignored before. You've wrapped your content into 2 .rows because you had 3 items side by side in mind while creating it.
There was no reason to have multiple .rows in this case at all.
In the HTML source, just above <div id="StarTrekTAS">, lets remove these 4 lines:
</div>
</div>
<div >
<div >
Now your content adapts the screen size fully dynamically, if the screen is wide enough you can even get all 6 side by side (or 5, or 4, or ...). Also without the manual .rowsplitting, when you shrink down to the right width for 2 columns side-by-side, it will really be 3 rows of 2, instead of 4 rows where 2 of them are half-empty.
The entire thing after all these changes (and with the CSS moved into <style> for myself):
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* untouched css */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSzBDemswC2Gg3mbDR7t8mQ53jByPChDtA5w&usqp=CAU');
text-align: center;
background-size: no repeat;
background-size: cover;
height: 310px;
color: white;
margin-bottom: 150px;
margin-left: 5px;
margin-right: 5px;
}
.header h1 {
margin: 0;
}
li {
list-style-type: none;
display: inline-block;
padding: 10px;
}
.menu ul {
text-align: center;
display: inline-block;
padding: 0px;
background: rgba(197, 228, 183, 0.8);
}
.menu {
display: inline-block;
margin-left: 10px;
}
p a {
display: inline;
}
/* the css under here is changed */
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.contentitem {
flex: 0 0 200px;
}
</style>
</head>
<body>
<div >
<h1>Sci-Fi Blog</h1>
<h3>dedicated to the Star Trek series</h3>
<div >
<ul>
<li>About</li>
<li>Resources</li>
<li>Other Sci-Fi series</li>
</ul>
</div>
</div>
<div >
<div >
<div id="STtos">
<h2>Star Trek TOS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTPdHkIFqZgTABvQtjcCnKr6mbWNfKBVDRRw&usqp=CAU"
alt="Pic of space ship">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna.
In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris
in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam.
</p>
<a href="#"> <button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--div STtos-->
<div id="STTNG">
<h2>Star Trek TNG</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQueIPqKDTgGH9_SaYzT7u9cfpvKs2P48l5dg&usqp=CAU"
alt="pic of space ship">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of STTNG-->
<div id="DS9">
<h2>Deep Space Nine</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKvwoJTvGIl2Nq2RzDKkf7OrgfVoHwrXP82A&usqp=CAU"
alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--DS9 -->
<div id="StarTrekTAS">
<h2>Star Trek TAS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwdlJfrFrcj7KJRdTADDtsfjGa0SQweeu0fQ&usqp=CAU"
width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of TAS-->
<div id="voyager">
<h2>Voyager</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiV6QTXDR7lD9uvx8S-IuTClS-CV6COgSh1g&usqp=CAU"
width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of Voyager-->
<div id="Enterprise">
<h2>Enterprise</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4Iz2D0_InBOZg4Wi_PWAT-1lEqxI0AExPg&usqp=CAU"
width="259" height="194" alt="pic">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna.
In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris
in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam.
</p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of Enterprise-->
</div>
</div>
</body>
</html>
Now, if you actually wanted to bring media queries back in, to make some other more explicit changes between the different resolutions, then you could (for example) add this to your CSS, below all your other styles:
@media screen {
/* (S) what you write in here, applies to any resolution (Small, Medium and Large) */
}
@media screen and (min-width:590px) {
/* (M) what you write in here, only applies to 590px or wider (Medium and Large screens) */
}
@media screen and (min-width:1000px) {
/* (L) applies to 1000px or wider (Large screens only) */
}
There are 2 things to note here:
- I have basically chosen to recognize 3 different screen sizes (small/medium/large) with the cut-off points between them being 590px and 1000px (which are just arbitrary example numbers).
- The 3 different
@mediablocks are not specific to small/medium/large, each affects its bigger variants as well. So the 3@mediablocks should perhaps be labeled as the SML, ML and L blocks.
If you wanted to change some background-color to yellow only for the smallest (S) screens, then you'd:
- Put
background-color: yellow;in the S block - Put
background-color: white;in the M block, to prevent M and L size screens from being affected by the yellow.
Or perhaps more specific to your site, if you wanted to never show more than 3 contentitems side by side, you could add this to the Large (L) block:
.contentitem {
flex-basis: 30%;
}
That would override the 200px we defined earlier on (in the flex property) with 30%.
CodePudding user response：
If you want to make your divs responsive i.e. in row direction when on pc and in column on mobile. You first have to define display: flex to the parent div so that all the divs inside it will be arrange in row sequence and inside the @media query just add one more property flex-direction: column this will change the default value of flex-direction which is row to column.