When in a landscape mode, I need to separate/make a gap (around 10-20px) between the two columns without using a border or anything like that. I tried everything and it still doesn't work, what am i missing? I tried putting margins, but it doesn't help, what's the best way to solve this?
#media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>
Just add something like gap: 5px to your container with flex layout
Thanks to #AbsoluteBeginner this feature is supported not everywhere. See here: https://caniuse.com/flexbox-gap
Add margin-right to the element if you want to stick to flexbox.
Otherwise - try out css grid, super easy with grid-gap to add the gap you need.
https://www.w3schools.com/css/css_grid.asp
You can add this CSS rule:
ul.container > *:nth-child(odd) .item-info {
margin-right: 50px;
}
It adds a right marging to every odd .item-info (or more precisely: to every .item-info inside every odd direct child element of the .container element)
#media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
ul.container > *:nth-child(odd) .item-info {
margin-right: 50px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>
Related
I'm building twitter clone and it's UI have a 3 column layout.
Working Implementation
When access it from desktop, it shows like this:
-------------------------------------------
| Navbar| Feed | Follow |
-------------------------------------------
When access it from tablet or mid size device, it shows like this:
-------------------------------------------
| Navbar| Feed |
-------------------------------------------
When access it from mobile or small size device, it shows like this(Navbar should be at bottom):
--------------------------------------------------
| Feed |
| Nav-item-1| Nav-item-2 | Nav-item-3| Nav-item-4|
--------------------------------------------------
I'm successful in making layout responsive for tablet and desktop but for mobile I'm having issues.
This is what I have tried:
#media (max-width: 480px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
align-items: flex-start;
flex-direction: row !important;
}
}
Full Code:
import "./styles.css";
export default function App() {
return (
<div className="wrapper">
<div className="row">
<nav className="bootomTab d-none d-sm-flex col-sm-2 col-lg-3">
<div>
<div className="logo">
<a href="/home">
<img src="/twitter.png" alt="logo" />
</a>
</div>
<a href="/home">
<i className="fas fa-home"></i>
</a>
<a href="/search">
<i className="fas fa-search"></i>
</a>
<a href="/notifications">
<i className="fas fa-bell"></i>
</a>
<a href="/messages">
<i className="fas fa-envelope"></i>
</a>
<a href="/profile">
<i className="fas fa-user"></i>
</a>
<a href="/signout">
<i className="fas fa-sign-out-alt"></i>
</a>
</div>
</nav>
<div className="mainSectionContainers col-12 col-sm-8 col-lg-5 ml-2">
<div className="titleContainer">
<h1>Home</h1>
</div>
Feed
</div>
<div className="d-none d-lg-flex col-md-2 col-lg-4 mt-5">
{/* Follow suggestions */}
<aside className="followSuggestion">
<div className="followSuggestionHeader">
<h2>Who to follow</h2>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
CSS Code:
div .logo {
width: 50px;
height: 50px;
}
div .logo img {
width: 100%;
}
nav {
display: flex;
flex-direction: column;
align-items: flex-end;
height: 100%;
}
nav a {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 30px;
width: 55px;
height: 55px;
text-decoration: none;
color: #212529;
}
nav a:hover {
background-color: var(--buttonHoverBg);
color: var(--primary-blue);
border-radius: 50%;
}
.mainSectionContainers {
padding: 0;
margin: 0 -10px 0 10px;
border-left: 1px solid #e6ecf0;
border-right: 1px solid #e6ecf0;
}
.titleContainer {
height: 53px;
padding: 0 15px;
display: flex;
align-items: center;
border-bottom: 1px solid #e6ecf0;
flex-shrink: 0;
}
.followSuggestion {
background-color: rgb(247, 249, 249);
border-radius: 16px;
padding: 15px;
margin: 0px 20px 20px 20px;
}
.followSuggestionHeader {
border-bottom: 1px solid #e6ecf0;
}
.followSuggestionHeader h2 {
font-size: 20px;
font-weight: 800;
}
.followUsernameContainer {
flex: 1;
display: flex;
padding: 12px 0;
border-bottom: 1px solid #e6ecf0;
}
.midFollowContainer {
padding: 0 15px;
}
.userImageContainer {
width: 50px;
height: 50px;
}
.userImageContainer img {
width: 100%;
border-radius: 50%;
background-color: white;
}
#submitPostButton {
background-color: #1fa2f1;
color: white;
border: none;
border-radius: 40px;
padding: 7px 15px;
}
#media (max-width: 480px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
align-items: flex-start;
flex-direction: row !important;
}
.logo {
display: none;
}
}
Finally, I managed to make it fully responsive.
The issue is because of the wrong breakpoint(480px) I have set and extra div present outside nav-items which override parent class property.
Changes I have made in css:
#media (max-width: 576px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
flex-direction: row !important;
}
.bootomTab a {
flex-grow: 1;
}
.logo {
display: none;
}
.mobileHide{
display: none;
}
}
On desktop, it shows like this:
On tablet, it shows like this:
On mobile, it shows like this:
This containers are arranged using nested flexbox. When I added an unordered list with zero padding, it got outside the child container. Not only that it also goes outside the parent container.
:root {
--main-bg-color: #3D3E5D;
--bg-color-red: #F06D4F;
--bg-color-aqua: #2DA6A4;
--bg-color-orange: #EFB85E;
--txt-color-primary: black;
--txt-color-secondary: white;
--heading: 3rem;
--sub-heading: 2rem;
--normal: 1rem;
--small: 0.5rem;
--main-padding: 10px;
}
* {
margin: none;
padding: 0;
box-sizing: border-box;
}
.container__main {
width: 90%;
margin: auto;
}
.container__flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex__box {
font-weight: 900;
font-size: var(--normal);
background-color: aqua;
flex: 0 0 calc(50% - 10px);
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.container__main>.container__flex {
margin-bottom: 10px;
}
.container__flex>.flex__box {
padding: var(--main-padding);
}
.p-0 {
padding: 0 !important;
}
<div class="container__main">
<div class="container__flex">
<div class="flex__box">
<b></b>
<span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
</div>
<div class="flex__box gray">
<div class="container__flex">
<div class="flex__box p-0 red">
<span class="sub-heading">Links</span>
<ul>
<li>Chubkins</li>
<li>W3 Schools</li>
<li>Learn Web Dev</li>
<li>Colour Reference</li>
</ul>
</div>
<div class="flex__box p-0 red">
</div>
</div>
</div>
</div>
<div class="container__flex">
<div class='flex__box'>
box1
</div>
<div class='flex__box'>
box2
</div>
</div>
</div>
Picture of the mentioned problem: https://prnt.sc/plgv0y
If you want to help me debug this view this codepen link:
https://codepen.io/bishant-bhattarai/pen/qBBqqYE
Since this was a small project I didn't add any comments, sorry for inconvineince.
This is probably due to the default value of the CSS property list-style-position.
You can try and change that like this:
:root {
--main-bg-color: #3D3E5D;
--bg-color-red: #F06D4F;
--bg-color-aqua: #2DA6A4;
--bg-color-orange: #EFB85E;
--txt-color-primary: black;
--txt-color-secondary: white;
--heading: 3rem;
--sub-heading: 2rem;
--normal: 1rem;
--small: 0.5rem;
--main-padding: 10px;
}
* {
margin: none;
padding: 0;
box-sizing: border-box;
}
.container__main {
width: 90%;
margin: auto;
}
.container__flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex__box {
font-weight: 900;
font-size: var(--normal);
background-color: aqua;
flex: 0 0 calc(50% - 10px);
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.container__main>.container__flex {
margin-bottom: 10px;
}
.container__flex>.flex__box {
padding: var(--main-padding);
}
.p-0 {
padding: 0 !important;
}
ul {
list-style-position: inside;
}
<div class="container__main">
<div class="container__flex">
<div class="flex__box">
<b></b>
<span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
</div>
<div class="flex__box gray">
<div class="container__flex">
<div class="flex__box p-0 red">
<span class="sub-heading">Links</span>
<ul>
<li>Chubkins</li>
<li>W3 Schools</li>
<li>Learn Web Dev</li>
<li>Colour Reference</li>
</ul>
</div>
<div class="flex__box p-0 red">
</div>
</div>
</div>
</div>
<div class="container__flex">
<div class='flex__box'>
box1
</div>
<div class='flex__box'>
box2
</div>
</div>
</div>
cf. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position
I want to place image floated left, next to image, floated left one under another would be Authro, Date and Category, than, after this other elements will be floated on right side...
Like this...
https://i.imgur.com/tcKwalP.png
This is what I have so far...
https://jsfiddle.net/fbn9r3y4/
This is html...
<div class="entry-meta">
<span class="entry-image">
<a class="entry-image-a" href="">
<img src="image.jpg" height="48" width="48">
</a>
</span>
<span class="entry-author">
Ester
</span>
<span class="entry-date">September 3, 2019</span>
<span class="entry-category-single">
Music
</span>
<span class="meta-right">
<span class="entry-views"><span class="view-count">998</span> Views</span>
<span class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em>Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</span>
</span>
</div>
This is css...
.entry-meta {
font-family: Arial, sans-serif;
display: block;
align-items: center;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-image {
display: block;
float: left;
}
.entry-author {
display: block;
float: left;
width: 200px;
}
.entry-date {
display: block;
float: left;
width: 200px;
clear: left;
}
.entry-category-single {
display: block;
float: left;
width: 200px;
clear: left;
}
.meta-right {
margin: 0 10px 0 0;
margin-left: auto;
order: 2;
float: right;
}
.entry-like {
min-width: 32px;
line-height: 1;
float: right;
clear: right;
}
.entry-views {
min-width: 32px;
line-height: 1;
float: right;
clear: right;
}
I changed up your markup a little bit and added a wrapping meta-left around the content of the left side. I also simplified your CSS. There were several CSS properties that were invalid or not necessary.
.entry-meta {
font-family: Arial, sans-serif;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-meta::after {
content: '';
clear: both;
display: block;
}
.meta-left {
float: left;
}
.meta-right {
float: right;
margin: 0 10px 0 0;
}
.entry-image {
float: left;
}
.meta-info {
float: left;
margin-left: 10px;
}
.entry-like {
min-width: 32px;
line-height: 1;
}
.entry-views {
min-width: 32px;
line-height: 1;
}
<div class="entry-meta">
<div class="meta-left">
<div class="entry-image">
<a class="entry-image-a" href="">
<img src="https://via.placeholder.com/48" height="48" width="48">
</a>
</div>
<div class="meta-info">
<div class="entry-author">
Ester
</div>
<div class="entry-date">September 3, 2019</div>
<div class="entry-category-single">
Music
</div>
</div>
</div>
<div class="meta-right">
<div class="entry-views"><span class="view-count">998</span> Views</div>
<div class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em> Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</div>
</div>
</div>
Here's a version using display: flex that's even simpler. Same markup.
.entry-meta {
font-family: Arial, sans-serif;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.meta-left {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.meta-info {
margin-left: 10px;
}
<div class="entry-meta">
<div class="meta-left">
<div class="entry-image">
<a class="entry-image-a" href="">
<img src="https://via.placeholder.com/48" height="48" width="48">
</a>
</div>
<div class="meta-info">
<div class="entry-author">
Ester
</div>
<div class="entry-date">September 3, 2019</div>
<div class="entry-category-single">
Music
</div>
</div>
</div>
<div class="meta-right">
<div class="entry-views"><span class="view-count">998</span> Views</div>
<div class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em> Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</div>
</div>
</div>
Esteros. Please check this link
https://codepen.io/juricon/pen/QWLOZea
HTML:
<div class="entry-meta">
<span class="entry-image">
<a class="entry-image-a" href="">
<img src="image.jpg" height="48" width="48">
</a>
</span>
<ul class="left-float-list">
<ol>
<a href="" title="" rel="author">
Ester
</a>
</ol>
<ol>
September 3, 2019
</ol>
<ol>
<a href="">
Music
</a>
</ol>
</ul>
<ul class="right-float-list">
<li class="items-reverse">
<span class="entry-views">
<!--do not miss nesting rules <tag><tag1></tag1</tag> -->
998
</span>
<span class="view-count">
Views
</span>
</li>
<li>
<span class="entry-like">
<span class="sl-wrapper"> <!--do not miss nesting rules <tag><tag1></tag1</tag> Also, you don't have in CSS classes like .sl-wrapper .sl-button, .sl-count, sl-loader -->
<a href="" class="sl-button">
<span class="sl-count">
500<em>Likes</em>
</span>
<!-- it is a bad idea to use <em> with not cursive text in one <span>. Use CSS to style your text -->
</a>
<span class="sl-loader">
</span>
</span>
</span>
</li>
<li>
Whatever
</li>
</ul>
CSS:
*{ /*clear styles*/
margin:0;
padding:0;
/*clear styles*/
}
.entry-meta {
font-family: Arial, sans-serif;
display: block;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-image{
float: left;
}
.left-float-list{
float: left;
width: 200px;
list-style:none;
background: green;
margin-left:.4em;
}
.right-float-list{
float: right;
list-style:none;
background: red;
margin-right:1em;
}
.entry-views, .entry-like {
min-width: 32px;
line-height: 1;
}
Esteros, here you will find a great web development free course https://www.freecodecamp.org/ and
https://www.w3schools.com/html/default.asp.
It will help you a lot. Good luck!
P.S.: Use Flexbox instead of "float" and you won't regret.
I am using angular-material and materializecss. I'm not really strong with css but i tried to play with it and not much of results ...
I am trying to inline the avatar with the text so far i tried to use span with class to try style the text together with img but no success..
Best result i got so far is , text after avatar but slightly below avatar.
my HTML and custom css.
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" ng-src="{{image.user.profile_picture}}">{{image.user.username}}
</div>
</md-card>
</div>
</div>
Use this:
.img-info img.circle{
vertical-align: middle;
}
And next time, share rendered HTML, the html you was shared is not useful.
snippet:
.img-info img.circle{
vertical-align: middle;
}
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" src="http://dummyimage.com/50x50/000655/fff"> The text
</div>
</md-card>
</div>
</div>
I am putting together a dynamic photo gallery and getting stuck trying to place thumbnails. Basically I am trying to place each thumbnail and caption in its own DIV, floated to the left. The thumbnails are working just as I want them to but for some reason the parent DIV refuses to cover the height of the thumbnail area. Here is the CSS I am using..
#galleryBox {
width: 650px;
background: #fff;
margin: auto;
padding: 5px;
text-align: center;
}
.item {
display: block;
margin: 10px;
padding: 10px;
float: left;
background: #353535;
min-width: 120px;
}
.label {
display: block;
color: #fff;
}
I have tried height: auto and that hasn't done anything. Here is what I am trying to style:
<div id="galleryBox" class="ui-corner-all">
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
</div>
Thanks!
Give your wrapper div an overflow: auto; so it contains the floated children correctly, like this:
#galleryBox {
overflow: auto; /* Only addition to your current styles */
width: 650px;
background: #fff;
margin: auto;
padding: 5px;
text-align: center;
}
This requires no HTML changes, just the style should do.
You need a clearfix
Add the below code to your css file and set the class of #gallerybox to clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
UPDATE:
Link