I have a gallery of masonry images and I want to place on each image a div with buttons.
My problem is that the div is not responsive and when I reduce the screen some buttons disappear rather than slow down and follow the movement of the screen.
I intend that by decreasing the screen the buttons will decrease and still appear all within the div.
HTML
<ul class="mdc-image-list mdc-image-list--masonry masonry-image-list second">
<li class="mdc-image-list__item" *ngFor="let image of list; let i = index;">
<img [src]="image" class="mdc-image-list__image">
<div class="mdc-image-list--with-text-protection">
<div class="mdc-image-list__supporting">
</div>
</div>
</li>
</ul>
The main problem to solve here is to align the icons next to each other, without using margin-left or float: left;. You can do this with display: flex; and justify-content: space-between; to the parent class (.mdc-image-list__label). This makes sure that each item gets displayed next to each other and the space-between ensures that there is equal space between each element. Read more about flexbox at MDN.
Updated StackBlitz for the adjustments.
.Pin{
margin-top: 8px;
width: 30px;
height: 30px;
cursor: pointer;
}
.Inbox{
width: 30px;
height: 30px;
margin-top: 8px;
cursor: pointer;
}
.Chat{
width: 30px;
margin-top: 10px;
height: 27px;
cursor: pointer;
}
.Task{
width: 30px;
height: 30px;
cursor: pointer;
margin-top: 8px;
}
// Adjusting this class
.mdc-image-list__label {
display: flex;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box; // To make sure it encapsulates the padding styling
}
Individual class to each image is unwarranted, so you can remove it and it's related css as well. The below css will fix your issue, it's more generic and better.
.mdc-image-list__supporting a {
width: 25%;
display: inline-block;
text-align: center;
}
.mdc-image-list__supporting a img {
width: 25px;
height: 25px;
cursor: pointer;
margin: 10px 0;
}
Related
I'm trying to create a banner that has two buttons on it:
.banner {
width: 100%;
display: flex;
flex-direction: column;
margin-top: -4%;
}
.banner img {
width: 100%;
/*image is 1232x317 by default and defines the size of the banner*/
}
.banner-buttons {
display: flex;
flex-direction: row;
margin-left: 6.2%;
position: absolute;
top: 10%;
}
.banner button {
display: flex;
font-size: 200%;
border: none;
border-radius: 5px;
font-weight: bold;
align-items: center;
padding: 5px 15px;
}
<div class="banner">
<img src="https://picsum.photos/1200/300">
<div class="banner-buttons">
<button>Assistir</button>
<button>Mais Informações</button>
</div>
</div>
but the problem is, the height of the buttons change based on the viewport, destroying the banner, how can I position it without ruining it?
I would personally avoid absolute positioning and use background image to create the layers.
You can set a min height on your banner if you desire.
I would also use em and media queries to reduce the font size when the screen resolution is smaller.
.banner {
background:url(https://picsum.photos/1200/300);
padding:10px;
}
.banner-buttons {
display: flex;
justify-content:center;
align-items: center;
}
.banner button {
font-size: 2em;
border: none;
border-radius: 5px;
font-weight: bold;
padding: 5px 15px;
margin:5px;
}
<div class="banner">
<div class="banner-buttons">
<button>Assistir</button>
<button>Mais Informações</button>
</div>
</div>
Actually what solved for me was adding position: relative to .banner, now the buttons are displayed at the exact same position at every screen size.
I'm trying to have texts stay next to divs like this image. However, when I resize the window, the text is under the div even though some text could fit between the gap. Is there any way to make them stay together? Both are display: inline-block;, and I have tried word-break: break-all; and overflow-wrap: break-word; but both don't work. Also, float left just messes up the whole thing and pushes everything up.
h3 {
position: relative;
color: var(--font-color);
font-size: 20px;
text-transform: uppercase;
display: inline-block;
margin-left: 5px;
word-break: break-all;
overflow-wrap: break-word;
}
.divider {
display: inline-block;
height: 15px;
width: 2px;
position: relative border-radius: 30px;
background: #0099ff;
margin-left: 35px;
}
<div class="divider"></div>
<h3>global average temperature</h3>
You can use the flexbox structure. Due to its structure, the elements in it will be inline-block automatically. I've tested it, they don't come bottom to bottom in the case of any width at the moment.
If you don't want to build this structure, you can also edit your code according to the resolution sizes with media query.
CSS:
h3{
margin-left: 5px;
}
.divider {
height: 15px;
width: 2px;
border-radius: 30px;
background: #0099ff;
margin-left: 35px;
}
.container-content {
display: flex;
align-items: center;
}
HTML:
<div class="container-content">
<div class="divider"></div>
<h3>global average temperature</h3>
</div>
I am trying to align 3 divs side by side in a navigation bar. I've spent the past 5 hours trying to figure this out and I know it's something super simple that I can't just wrap my head around.
This is where I am at right now.
If I float the align-right div the tags Join & Support stack ontop of each other.
<div id="sticky-nav">
<div class="container">
<div class="box">
<div class="align-left">
Home Listings
</div>
<div class="align-center">
<form action="/action_page.php">
<input type="text" placeholder="Search..">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
<div class="align-right">
Join Support
</div>
</div>
</div>
</div>
#sticky-nav {
overflow: hidden;
background-color: #7889D6;
position: fixed;
top: 0;
width: 100%;
}
#sticky-nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
#sticky-nav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
max-width: 300px;
width: 100%;
}
#sticky-nav button {
padding: 6px 10px;
padding-top: 1px; margin-top : 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
margin-top: 8px;
}
#sticky-nav a:hover {
background-color: #ddd;
color: black;
}
#sticky-nav a.active {
background-color: #4CAF50;
color: white;
}
.container {
display: table;
width: 100%;
}
.box {
display: table-row;
}
.align-left {
width: 33%;
text-align: justify;
display: table-cell;
padding: 10px;
}
.align-center {
width: 33%;
text-align: justify;
display: table-cell;
padding: 10px;
}
.align-right {
width: 33%;
display: table-cell;
padding: 10px;
text-align: right;
}
EDIT: This is the layout I am trying to achieve,
I see that you're using display: table to achieve this effect. I highly recommend reading up more first before continuing with your work or project. Some layout concepts you have to know are grid and flex. In your case, we can use the flexbox concept to solve your problem.
flex basically is a method that can distribute space between items more easily. In your case, you can get what you're trying to achieve by using flex-grow and flex-basis. flex-basis defines how, initially, long/tall an item inside a flex container should be. flex-grow defines how an item inside a flex container can expand (grow) in width/height depending on the remaining space of the container.
In your case, we can simply set the flex container's width (your wrapping div) to 100%. To distribute space evenly between the items, we can set all the items' initial widths to 0. Then, distribute the remaining space of the container (which is still 100%) evenly using flex-grow to 1 for each flexbox item. However, this will make all the items similar in width. To make the center div wider, you can set the flex-grow to 2. This will make it so that the left div, center div, and right div have 25%, 50%, and 25% of the container's remaining space in width respectively. I really recommend reading further about flex to understand what I mean. After reading about flex in the above link, try visiting this and this to learn more about flex-basis and flex-grow.
Here's a working solution using flex. Again, I recommend reading more about flex so that you can use flex better.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Helvetica;
}
body,
html {
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
width: 100%;
}
#wrapper * {
padding: 30px;
text-align: center;
color: white;
}
.left-align,
.right-align {
flex-basis: 0;
flex-grow: 1;
}
.center-align {
flex-basis: 0;
flex-grow: 2;
}
.left-align {
background: #121212;
}
.center-align {
background: #232323;
}
.right-align {
background: #454545;
}
<div id="wrapper">
<div class="left-align">Some content</div>
<div class="center-align">Some content</div>
<div class="right-align">Some content</div>
</div>
I have created a simple example for your layout.
You can achieve it using flex box i.e
.box{
display: flex;
width:100%;
justify-content:space-between;
}
Here is the link: https://codesandbox.io/s/optimistic-euclid-xmv6h
Hope it answer your question.
I have a logo image with some transparency in it. How can I align the logo image to the center on the fixed navbar and then move it slightly to the left on smaller devices so that the content on the right can fit on the navbar?
I have tried background-size: cover but makes the image responsive and the logo gets cut off. I tried background-size: contain but then I lose the background color of the navbar on larger devices.
Is there a way I can move the image to the html to achieve what I need?
Here is my attempt on plnkr:
https://plnkr.co/edit/Uij12vHwFuaeAS91nYUL?p=preview
thanks
UPDATE:
I am trying a different approach and moved the image into the html and try to use the css flexbox approach. Almost there, but need to remove the gap.
HTML:
<nav class="navbar navbar-fixed-top">
<div class="search">
<i class="fa fa-search"></i>
</div>
<a class="brand-logo" href="#/">
<img src="https://i.imgsafe.org/1963cc1736.png" />
</a>
<aside>
<figure class="account-balance">
<span>de 88,980.7740</span>
<i class="fa fa-user"></i>
</figure>
</aside>
</nav>
CSS
nav.navbar {
border: 0;
color: #FFF;
height: 40px;
min-height: 40px;
z-index: 1;
display: 0;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.search,.filler,aside,figure {
height: 100%;
}
.search,.filler,aside {
background: #266224;
float: left;
}
.search,aside {
flex-grow: 1;
-webkit-flex: 1;
}
.search .fa-search,figure > span {
display: inline-block;
margin-top: 12px;
}
.search {
padding: 0 12px;
}
.brand-logo img {
height: 40px;
max-width: 100%;
}
figure {
float: right;
}
figure.account-balance {
padding-right: 12px;
}
figure > span {
line-height: 25px;
margin-top: 8px;
padding-right: 5px;
}
Here is the modified version using flexbox:
https://embed.plnkr.co/wSWpIDIoJOiSQYVvwHMU/
This does come close to resolving the problem however, this is not working well on iPhone 6 and old iPad.
There is a slight gap on either side of the anchor tag (maybe half a pixel gap), I have tried the solution mentioned here: css flex layout not working on some iPads but it doesn’t work.
Do you know a way to remove the gap?
Try to write specified styles for different device width using this.
try this:
ul li {
height: 180px;
width: 180px;
background: #f6304c;
display: block;
color: #ffffff;
text-align: center;
margin: 2% 0 0 30%;
padding: 50px 0;
}
for mobile device
#media screen and (min-width: 678px) {
ul li {
height: 180px;
width: 180px;
background: #f6304c;
display: block;
color: #ffffff;
text-align: center;
float:left;
/ margin: 2% 0 0 30%;*/
padding: 50px 0;
}
}
use this
.brand-logo {
background: url(https://i.imgsafe.org/1963cc1736.png) left center no-repeat;
background-size: contain;
background-position: center;
background-color: #266224;
height: 100%;
}
the only thing you have to do is fill the O in your logo with the color because it is transparent XD
I got these share buttons from simplesharebuttons.com. I added a more button that will eventually be used to unhide less popular social media icons on smaller screens, but it's not lining up with the rest of the buttons and I can't figure out what the problem is.
http://jsfiddle.net/WLSqw/41/
#share-buttons img {
width: 35px;
padding-right: 5px;
display: inline;
}
#more {
width: 35px;
margin-right: 5px;
background: #ccc;
display: inline-block;
border-radius: 50%;
color: white;
font-size: 1em;
text-align: center;
line-height: 35px;
}
Actually, being an inline-block element, all you need for your #more is:
vertical-align: top;
DEMO
Add float:left; to the links and that button
JSFiddle