I don't know how to vertical align images in React Slick slider in mobile version. Always images that are 16:9 (vertical images) are on top on the div, but I would like to have them in the middle of the div (just how the arrows are positioned).
jsx file:
return (
<div className="galerija-container">
<div className="grupa">
<h2>Lavanda</h2>
<Slider
{...settings}
style={{
display: "flex",
}}
>
{lavanda.map((item, index) => (
<div key={index} className="slike">
<img src={item.slika} alt="" />
</div>
))}
</Slider>
</div>
</div>
);
scss file:
.galerija-container {
width: 95%;
margin: 20px auto;
& .grupa {
background-color: var(--lightorange);
border-radius: 15px;
padding: 10px;
height: 450px;
margin: 40px 0;
& h2 {
text-align: center;
font-size: 2.5rem;
}
& img {
max-height: 350px;
max-width: 100%;
padding: 5px;
border-radius: 30px;
margin: 0 auto;
}
}
& .arrow {
font-size: 50px;
padding: 5px;
cursor: pointer;
color: var(--lightgrey);
height: 350px;
display: flex;
align-items: center;
}
}
Related
so I'm trying to create my blog using the react framework, but I'm facing an issue here.
I really have been trying to tweaks settings on the css, html or even try to switch to grid instead of flexbox but I can't figure out how to make the "fixed" navbar detected by the flexbox.
Currently, the navbar works fine I guess, but the content that is supposed to be on the right, is not taking the place it should, it's taking the entire screen instead of the rigth section next to the navbar.
Some help would be highly appreciated !
body {
overflow: hidden;
height: 100vh;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.nav-tab-text{
font-size: 1.6em;
display: block;
padding: 00px 0px 50px 0px;
text-align: center;
list-style-type: none;
display: flex;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
position: fixed;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
align-self: center;
margin-top: 3%;
}
.test{
display: flex;
}
function Navbar() {
return (
<div className="flex-container">
{/*left box - Navbar*/}
<nav className="nav-tab">
Home
Articles
Archives
About
</nav>
{/*Right box - Home content*/}
<div className="home-content-container">
<div className="home-content-title">
<h3>Name</h3>
</div>
<div className="home-content-featured">
<p>1</p>
</div>
</div>
<div className="test">
<p>2</p>
</div>
</div>
);
}
export default Navbar;
import Navbar from "./components/Navbar";
function App() {
return (
<div>
<Navbar />
</div>
);
}
export default App;
body {
overflow: hidden;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.flex-container{
display: flex;
flex-flow: row;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
display: flex;
flex-direction: column-reverse;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
margin-top: 3%;
align-self: center;
}
This may be a begginer question, but I just can't seem to figure it out.
HTML:
<div id = "upper">
<input id = "leftBigArrow" class = "button" type="button">
<div id = "picBox">
<img id = "bigPic" src="images/IMG_1744.JPG" alt="">
<div id = "overlay">
<div id = "olText">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
</div>
<input id = "rightBigArrow" class = "button" type="button">
</div>
CSS:
#upper {
display: flex;
background: white;
box-shadow: 0px 0px 7px 2px #313131;
}
#picBox {
width: 800px;
height: 600px;
background-color: #8D918D;
display: flex;
}
#pigPic {
object-fit: contain;
object-position: center;
z-index: 1;
}
#overlay {
align-self: flex-end;
width: 100%;
height: 20%;
background-color: black;
color: white;
opacity: 0.6;
margin: 0;
font-size: 80%;
z-index: 2;
}
#olText {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
}
h1, p {
margin-left: 20px;
}
h1 {
margin-top: 0;
margin-bottom: 10px;
}
p {
margin-top: 0;
margin-bottom: 0;
}
In #picBox I have 2 items, an image (#bigPic) with object-fit attribute and a div with a div with 2 text items (#overlay). I want to have the overlay over the image. Overlay height is 20% at the bottom of #picBox and the 2 text items in #olText need to be arranged as css shows. If I use position absolute and relative, it messes up the object-fit. So how can I make this work as I intended?
In CSS, if you want to overlay an element, that element's position (in this case #picBox) needs to be set to relative first. Then the position of the element you want on top (#overlay) should be set to absolute. See the example below.
#upper {
display: flex;
background: white;
box-shadow: 0px 0px 7px 2px #313131;
}
#picBox {
width: 800px;
height: 600px;
background-color: #8D918D;
display: flex;
position: relative;
}
#pigPic {
object-fit: contain;
object-position: center;
z-index: 1;
}
#overlay {
align-self: flex-end;
width: 100%;
height: 20%;
background-color: black;
color: white;
opacity: 0.6;
margin: 0;
font-size: 80%;
z-index: 2;
position: absolute;
}
#olText {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
}
h1,
p {
margin-left: 20px;
}
h1 {
margin-top: 0;
margin-bottom: 10px;
}
p {
margin-top: 0;
margin-bottom: 0;
}
<div id="upper">
<input id="leftBigArrow" class="button" type="button">
<div id="picBox">
<img id="bigPic" src="https://www.w3schools.com/tags/img_pink_flowers.jpg" alt="">
<div id="overlay">
<div id="olText">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
</div>
<input id="rightBigArrow" class="button" type="button">
</div>
Hello i searched and found nothing about i would like to put cards on the end of a div like this:
I imagine what would have to do with position absolute and relative but I can't imagine how to put the two divs
code:
export default function App() {
return (
<div className="Container">
<div className="Header" />
<div className="Content">
<div className="Carousel" />
<div className="main" />
</div>
<div className="footer">a</div>
</div>
);
}
css:
body {
margin: 0;
height: 100vh;
}
.App {
font-family: sans-serif;
text-align: center;
}
.Container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
max-width: 100%;
}
.Header {
position: relative;
height: 80px;
flex: none;
background: #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
.Content {
flex: 1;
}
.Carousel {
background: #1976d2;
background-image: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
flex: none;
height: 280px;
background-repeat: no-repeat;
background-position: top center;
padding-top: 128px !important;
padding-bottom: 128px !important;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
}
.main {
height: 400px;
background: yellow;
padding: 0 0.625em;
margin-left: auto !important;
margin-right: auto !important;
max-width: 97.2307692rem !important;
}
.footer {
max-height: 40px;
height: 40px;
height: 100%;
background: red;
flex: none;
}
example on codesandbox:
https://codesandbox.io/s/angry-mestorf-6kmmo
Just add inside your code 3 cards:
<div className="Container">
<div className="Header" />
<div className="Content">
<div className="Carousel" />
<div className="cardContainer">
<div className="card">Card 1</div>
<div className="card">Card 2</div>
<div className="card">Card 3</div>
</div>
<div className="main" />
</div>
<div className="footer">a</div>
</div>
And then use css to adjust them:
cardContainer height should be set to 0 to avoid spacing between the other divs
negative margin-top could be applied to cardContainer or single divs to place them "on the end of a div"
z-index could be required to prevent them from going under the div
display flex and justify-content are used to place 3 div equally spaced.
CSS
.cardContainer {
height: 0px;
display: flex;
justify-content: space-around;
margin-top: -150px;
}
.cardContainer div {
background-color: white;
padding: 100px 50px;
z-index: 10;
}
Make a Div with your cards and position it absolutely between the two sections. I put it inside the first section.
main {
display: flex;
flex-direction: column;
}
section {
position: relative;
height: 50vh;
background-color: green;
}
section:last-of-type {
background-color: yellow;
}
.cards {
display: flex;
justify-content: space-between;
width: 300px;
margin: 0px auto;
border: 1px solid red;
position: absolute;
left: 0;
right: 0;
bottom: -30px;
z-index: 10;
}
.card {
width: 60px;
height: 60px;
background-color: #fff;
}
<main>
<section>
<div class="cards">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
</section>
<section>
<p>Hi</p>
</section>
</main>
With the tips from #Jhecht
code:
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="Container">
<div className="Header" />
<div className="Content">
<div className="Carousel" />
<div className="main">
<div
className="card"
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "transparent",
height: "200px"
}}
>
<div
style={{
height: "400px",
marginRight: "10px",
background: "green",
width: "350px"
}}
/>
<div
style={{
height: "400px",
marginRight: "10px",
background: "black",
width: "350px"
}}
/>
<div
style={{ height: "400px", background: "green", width: "350px" }}
/>
</div>
</div>
</div>
<div className="footer">a</div>
</div>
);
}
css:
body {
margin: 0;
height: 100vh;
}
.App {
font-family: sans-serif;
text-align: center;
}
.Container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
max-width: 100%;
}
.Header {
position: relative;
height: 80px;
flex: none;
background: #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
.Content {
flex: 1;
}
.Carousel {
position: relative;
background: #1976d2;
background-image: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
flex: none;
height: 280px;
background-repeat: no-repeat;
background-position: top center;
padding-top: 128px !important;
padding-bottom: 128px !important;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
}
.main {
height: 400px;
background: yellow;
padding: 0 0.625em;
margin-left: auto !important;
margin-right: auto !important;
max-width: 97.2307692rem !important;
}
.footer {
max-height: 40px;
height: 40px;
height: 100%;
background: red;
flex: none;
}
.card {
transform: translateY(-100px);
}
I'm trying to aling image to left side in Angular material with mat-card component, however my image still have some margin (left, up, down). I assume it's because I've used mat-grid.
So what should I do to solve this.
This is what I have:
https://stackblitz.com/edit/angular6-material-components-demo-a3gaj2
And this is what I expect:
<mat-card class="home-card">
<mat-card-content class="home-card-content">
<img mat-card-image
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu">
<div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
</mat-card-content>
</mat-card>
html {
min-height: 100%;
}
body {
height: 100%;
margin: 0px;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.home-card {
border-radius: 4px;
max-width: 600px;
max-height: 1000px;
margin-top: 100px;
padding: 0;
.mat-card-image {
margin: 0;
height: 100%;
}
.home-card-content {
display: flex;
justify-content: space-between;
& > * {
display: flex;
justify-content: center;
align-items: center;
flex: auto;
max-width: 50%;
&:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&:last-child {
flex-direction: column;
align-items: start;
padding: 8px;
}
}
}
}
You just need to apply only this css to set image, this css set all image same size no matter it is small or big.
object-fit: cover;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
In example on <img> setted margin: 0 -16px 16px -16px; via .mat-card-image
But negative margin is bad practice
Just add you own css selector on <mat-card> with padding: 0
There is object-fit: contain as a way to resize the image so that the entire image fits within the frame, aligning the long side of the image with the frame.
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
.contain {
object-fit: contain;
}
<div>
<h2>object-fit: contain</h2>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain" />
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow" />
</div>
However, this does not work for div tags and so on, it works only for replacement elements.
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
.contain-parent {
width: 150px;
height: 100px;
background: red;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
background: green;
margin-top: 10px;
}
.contain1 {
width: 50px;
height: 80px;
background: blue;
object-fit: contain;
}
.contain2 {
width: 80px;
height: 50px;
background: blue;
object-fit: contain;
}
<div>
<h2>object-fit: contain(not work)</h2>
<div class="contain-parent">
<div class="contain1"></div>
</div>
<div class="contain-parent">
<div class="contain2 narrow"></div>
</div>
</div>
How can I reproduce the same behavior as object-fit: contain on replacement elements with div tags,
span tags and so on? I want to display letter box when the aspect ratio does not match.