Greet1ngs, everyone. I'm trying to implement a header on grid which dynamically moves columns to the next row on smaller screens. I use the following string to build it:
grid-template-columns: repeat(auto-fit, minmax(max-content, 230px));
It kinda works but on some resolutions columns do not expand to the full width to the right and thus another background (from [body]) becomes visible from underneath. How can I make all columns even to the right end of the screen without mediaquery or calc (will try those if no other way)? Sorry for unprofessional explanation, I'm still new to coding. Screenshot
#charset "utf-8";
.headergrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(max-content, 230px));
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;}
.headergrid > div {
background-color: #191D1F;}
<body style="background-color:#1ba6fc;">
<div class="headergrid">
<div class="location">
<img src="clipart-map-location-11.png" alt="location" width="20" height="20" class="locicon"><span style="color:#E2E4C9">Москва, ул Хабаровская, 2. Cр-Вс с 12 до 18.</span>
</div>
<div class="element">
<img src="phngrn.png" width="25" height="25" alt="phone" class="phonicon">+7(977)8844-922
</div>
<div class="element">
<img src="hiclipart.com (11).png" width="30" height="20" alt="mail" class="mailicon"/>mail#zvteh.ru
</div>
<div class="element">
</div>
<div class="social">
<img src="hiclipart.com.png" width="40" height="30" alt="whatsapp" class="whappicon">
<img src="hiclipart.com (12).png" width="30" height="30" alt="VK.com" class="vkicon">
<img src="hiclipart.com (14).png" width="27" height="27" alt="Telegram" class="telecon"></div>
</div>
The solution is to put this grid into parent div box with header's background color. It will override main background there and all rows appear having 100% width at all resolutions.
Related
The photos should look like this:
This is a uni assignment and it’s like my first experience with coding so please try to understand. And I'm pretty sure there are a lot of mistakes so please help me out if you can.
This is my code so far:
.wrapper-home-photo {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
background-color: #1d1d1e;
padding: 100px;
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home1.jpg" width="540" height="330" />
</figure>
</div>
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home2.png" width="400" height="220" />
</figure>
</div>
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home3.jpg" width="540" height="330" />
</figure>
</div>
this may help you
<div class="wrapper-home-photo">
<figure>
<img src="./src/imgs/home-photos/strangerthings-home1.jpg" width="540" height="330" />
</figure>
<figure>
<img src="./src/imgs/home-photos/strangerthings-home2.png" width="400" height="220" />
</figure>
<figure>
<img src="./src/imgs/home-photos/strangerthings-home3.jpg" width="540" height="330" />
</figure>
</div>
Put all the images into one centralized div with the class block. From here, you can use display: grid to align all the contents of the div into a grid. Then just do grid-template-columns: 1fr 1fr 1fr; to create 3 columns, each 1fr being 1 fraction of the div, and since you have three images you will need 3 columns. You can use grid-gap: 20px to add some margins and separation between each image.
.banner {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
grid-column-gap: 20px;
}
.banner img {
width: 100%;
}
<div class="banner">
<img src="https://www.muralswallpaper.com/app/uploads/Green-Tropical-Plant-Wallpaper-Mural-Plain.jpg">
<img src="https://www.muralswallpaper.com/app/uploads/Green-Tropical-Plant-Wallpaper-Mural-Plain.jpg">
<img src="https://www.muralswallpaper.com/app/uploads/Green-Tropical-Plant-Wallpaper-Mural-Plain.jpg">
</div>
I have a CSS Grid layout which looks like below:
This works perfectly for me, but when I lower the resolution of the screen, the grid's responsiveness makes the grid look like this:
Instead, I want the wrapping items to justify the left and right white spaces, and they should look like this:
How can I achieve the above? The items are dynamic in number. There can be even number of items which will make it look better as the left and right white spaces will be equally spaced. But if the items are odd in number the white spaces should still be equally distributed. I tried with grid-auto-flow and align-items, but they don't seem to be helping.
.accordioninnergrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.innerbox {
display: flex;
border: 1px solid black;
flex-direction: column;
align-items: center;
word-wrap: break-word;
width: auto;
}
.innerbox>p,
img {
margin: 1%;
}
<div class="accordioninnergrid">
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="some-image" width="50%" height="50%" />
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
</div>
This is a problematic layout with Grid or Flex. There's no simple solution with either.
With Grid, there's no way to automatically position items in the middle columns. How does the grid know it needs to place grid items in, let's say, columns 3, 4 and 5, so that they appear centered?
Worse, what if there were only four columns and one item to center? That item would have to span across columns 2 and 3.
There's no grid function that does this automatically. It must be author-defined.
With Flex, the problem above doesn't exist. But there's a trade-off. Flex has a problem that Grid doesn't have.
It stems from this section of the code:
.accordioninnergrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
The grid-template-columns rule is saying that each column can be a minimum width of 240px, and a maximum width of 1fr (i.e., all available space).
In flex, the property to use in place of the fr function would be flex-grow.
But, because there are no column tracks impeding movement across the line in a flex container, flex-grow is free to expand items across the entire line.
In short, flex-grow and centering cannot co-exist.
If flex-grow were removed, then you'd have no problem centering with flex. But, of course, there would be another trade-off: you would lose the consumption of free space feature:
.accordioninnergrid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.innerbox {
flex: 1 0 140px; /* fg, fs, fb -- try fg: 0 */
display: flex;
border: 1px solid black;
flex-direction: column;
align-items: center;
word-wrap: break-word;
}
.innerbox > p,
img {
margin: 1%;
}
<div class="accordioninnergrid">
<div class="innerbox">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
<div class="innerbox">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<p>
This is the text
</p>
<p>
Small Tagline
</p>
</div>
</div>
More details here:
Aligning grid items across the entire row/column (like flex items can)
Targeting flex items on the last or specific row
I am currently trying to achieve the following type of grid/column but I am not able to.
Some images have bigger width than others so they need to take up more space.
I will have around 30ish images that I will loop through so i can't just put a set width to each column.
I am not sure how to tackle this problem.
I have the following and I want to have 3 per row it is giving me somewhat okey results but not exactly.
https://codepen.io/BlooDyBG/pen/OJVxYEj
<div class="flex-container">
<div class="flex-item">
<a href="https://ibb.co/CBBLGnp"><img src="https://i.ibb.co/WnnCJcN/Image-2.png" alt="Image-2"
border="0"></a>
</div>
<div class="flex-item">
<a href="https://imgbb.com/"><img src="https://i.ibb.co/HqdrqQB/Image-3.png" alt="Image-3" border="0">
</a>
</div>
<div class="flex-item">
<img src="https://i.ibb.co/r0YZVVw/Image-4.png" alt="Image-4" border="0">
</div>
<div class="flex-item">
<img src="https://i.ibb.co/7pSqfZn/Image-5.png" alt="Image-5" border="0">
</div>
<div class="flex-item">
<img src="https://i.ibb.co/R6Vd1WH/Image-6.png" alt="Image-6" border="0">
</div>
<div class="flex-item">
<img src="https://i.ibb.co/HqdrqQB/Image-3.png" alt="Image-3" border="0">
</div>
</div>
CSS
.flex-container {
display : flex;
flex-wrap: wrap;
padding : 20px;
}
.flex-item {
flex: 1 1 auto;
padding : 20px;
}
img {
width : 100%;
height : 100%;
}
The third part of the flex shorthand is flex-basis, which informs the browser how to treat sizing of the flexible items. In this case, you've set it to auto which instructs the browser to use the width of the content to determine the size.
Instead, you should use something like flex: 1 1 30% to ensure that all of the items have a consistent size.
Alternately, you can create this type of layout with CSS Grid. That would look something like this:
.flex-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
I've been trying to solve this for almost 6 hours just to get this to be responsive on mobile. Will someone please help me? It's really difficult and I really want to finish this homework.
I wanted it to look like this, but mobile responsive: https://imgur.com/kRcHUDJ
I only use HTML and inline CSS, hopefully, there is a solution to this.
<center>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
Demo here: https://codepen.io/anon/pen/WVpwwX
It does appear to be working great on desktop, what I wanted to achieve is given; but when it comes to mobile, the results aren't great. I had to scroll to the right just to see the full image.
My expected output is to have the images stacked up together when viewed on mobile. Thanks guys.
Almost there. The images need to have a max-width set for mobile devices so they will resize automatically instead of flowing off the screen because of their 500px width setting. Set display to inline-block as well:
https://codepen.io/ZorlacMeister/pen/PMpNRK
You can test easily in Chrome. Hit F12, then click on the little icon that looks like two mobile devices standing upright next to each other, then RELOAD the page to see the mobile layout.
HTML
<center>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/blog/"><img data-original="/uploads/button-1.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/testimonials.php">
<img data-original="/uploads/button-2.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
CSS
.img-responsive {
max-width:75%;
display: inline-block;
}
You can use a grid layout to achieve this.
grid-gap: 1em; specifies your padding between elements
center {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
img {
max-width: 100%;
}
<center>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
</center>
I set the image width to 100% and used a class named column on the <ul> to set the box-sizing, float a relative width and display.
I also set the <ul> paddings to 2.5%.
Check it on Codepen or below
.column {
box-sizing: border-box;
float: left;
width: 50%;
display: inline-block;
}
ul{
padding-left: 2.5%;
padding-right: 2.5%;
}
<center>
<ul class="homepageGuide column">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="100%" alt="example one">
</p>
<span class="color-overlay"></span>
</a>
</ul>
<ul class="homepageGuide column">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="100%" alt="example two">
</p>
<span class="color-overlay"></span>
</a>
</ul>
</center>
I am trying to have three columns aligned so that they are all the right side. Here is what I have so far: https://prnt.sc/o5284n
And here is how this is supposed to work: https://prnt.sc/o528y3
I have managed to solve this problem by applying margin to the sides of the images, but this gets really messed as the web page gets smaller.
I have looked into many other option such as float and column gap but this doesn't work for me in this case
<section id="bottom">
<img src="Appify.png" alt="app" width="310" height="200" class="pad">
<p class="twenty_f">APPIFY</p>
<img src="sunflower.jpeg" alt="flower" width="310" height="200" class="pad">
<p class="twenty_f">SUNFLOWER</p>
<img src="bokeh.jpeg" alt="bokeh" width="310" height="200" class="pad">
<p class="twenty_f">BOKEH</p>
</section>
I think what you are looking for flexbox handles perfectly.
That being said. The problem you are running into is that you don't have a max-width on your bottom-section.
Try adding:
section#bottom {
max-width: 1000px;
text-align: center;
}
This will allow your items to be closer together without stretching out too far.
What I suggest though is using the flexbox method. Another thing is you should wrap your images and related text into a div that contains them together. It gives you better responsive control in the end.
I have given you an example that I quickly did on codepen.
Link to example
Why don't go with flexbox approach. Try this:
#bottom {
display: flex;
justify-content: space-around;
}
#bottom div {
text-align: center;
margin-right: 10px;
}
<section id="bottom">
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="app" width="310" height="200" class="pad">
<p class="twenty_f">APPIFY</p>
</div>
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="flower" width="310" height="200" class="pad">
<p class="twenty_f">SUNFLOWER</p>
</div>
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bokeh" width="310" height="200" class="pad">
<p class="twenty_f">BOKEH</p>
</div>
</section>
Refer: https://www.w3schools.com/css/css3_flexbox.asp
Hope it helps. Cheers!