My html code works fine in chrome but not in firefox. Issue happens when you click "see more" [modal] to see the description. I narrowed down to modal css property being the issue. When i change the position from fixed to relative, firefox it works but it messes with other style components. Can you please help here.
https://testhtmlcode.w3spaces.com/saved-from-Tryit-2023-01-02.html
<!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>Popoup in javascript</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
font-family: 'system-ui', 'sans-serif';
font-weight: 300;
transition: .3s linear 0s all;
}
.container {
position: relative;
z-index: 1;
display: flex;
justify-content: left;
align-items: left;
flex-wrap: wrap;
margin: 40px 0;
}
.container .card {
position: relative;
width: 300px;
height: 400px;
background: url(https://images.pexels.com/photos/3747155/pexels-photo-3747155.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load) no-repeat;
background-size: cover;
margin: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
overflow: hidden;
}
.container .card .content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.5s;
}
.container .card:hover .contentBx {
transform: translateY(-20px);
}
.container .card .content .contentBx h2 {
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 18px;
text-align: center;
margin: 20px 0 10px;
line-height: 1.1em;
}
.container .card .content .contentBx p {
color: #ffffff;
letter-spacing: 2px;
font-weight: 500;
font-size: 14px;
text-align: left;
margin: 20px 0 10px;
line-height: 1.1em;
padding-left: 15px;
}
.container .card .sci {
position: absolute;
bottom: 50px;
display: flex;
}
.container .card .sci li {
list-style: none;
margin: 0 10px;
transform: translateY(40px);
transition: 0.5s;
opacity: 0;
}
.container .card:hover .sci li {
transform: translateY(0px);
opacity: 1;
}
.container .card .sci li a {
color: #000000;
font-size: 20px;
}
.blur-filter {
filter: blur(2px);
}
</style>
<style>
[modal] {
opacity: 0;
position: fixed;
top: 120%;
bottom: 0;
left: 0;
right: 0;
color: white;
background: #ffffff38;
backdrop-filter: blur(10px);
overflow: hidden;
transition: 1s linear 0s all;
}
[modal="active"] {
opacity: 1;
top: 0%;
}
[modal]>.modal {
display: contents;
}
[modal]>.flexbox_column {
margin: 0;
}
[modal]>.modal>.modal_header {
display: grid;
grid-template-columns: auto 24px;
padding: 10px;
}
[modal]>.modal>.modal_header>h4 {
font-weight: 500;
}
[modal]>.modal>.modal_header>._close {
cursor: pointer;
}
[modal]>.modal>.modal_content {
height: 100%;
padding: 10px;
border-radius: 16px;
overflow: scroll;
}
[modal]>.modal>.modal_content::-webkit-scrollbar {
width: 5px;
}
[modal]>.modal>.modal_content::-webkit-scrollbar-track {
background: #e2e2e2;
}
[modal]>.modal>.modal_content::-webkit-scrollbar-thumb {
background: #9a9a9a;
}
[modal]>.modal>.modal_content::-webkit-scrollbar-thumb:hover {
background: #b6b6b6;
}
[modal]>.modal>.modal_content>img {
max-width: 100%;
object-fit: cover;
filter: opacity(0.8);
}
[data-modal] {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<section>
<div class="container">
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header">
<h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
</div>
<!--CARD END-->
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header">
<h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
<!--CARD END-->
</div>
</section>
</div>
</body>
<script>
let modalLinks = document.querySelectorAll('a[data-modal]');
modalLinks.forEach(link =>
link.addEventListener('click', function() {
openModal(link)
})
);
function openModal(e) {
const el = e.closest('.card');
const modal = el.querySelector('[modal]');
modal.setAttribute('modal', 'active');
}
function closeModal(e) {
const modal = e.closest('[modal]');
modal.setAttribute('modal', '');
}
</script>
</html>
Related
This is a very strange problem I've encountered. Everytime I add more content to the main content the sidenav links aren't able to be clicked on. Here is an example of the sidenav without main content:
<style>
div.sidenav {
width: 240px;
position: absolute;
z-index: -1;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
</style>
</head>
<body>
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
YouTube
Twitter
</div>
<div class="main">
<h2>Some text</h2>
</div>
</body>
Here is an example with main text:
<style>
div.sidenav {
width: 240px;
position: absolute;
z-index: -1;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
</style>
</head>
<body>
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
YouTube
Twitter
</div>
<div class="main">
<h2>Some text</h2>
<p>
Lorem ipsum dolor sit amet. In aperiam magnam in quod aliquam ut dolor reprehenderit nam modi fugit ab sunt harum et alias amet. Aut alias magni et perferendis molestias ut veritatis explicabo qui rerum reprehenderit?
</p>
<p>
Ut pariatur soluta ea exercitationem nisi in optio ratione 33 totam modi et ipsam natus? Vel eius suscipit eos voluptatem nihil ut adipisci alias aut quos dolor quo soluta velit.
</p>
<p>
Voluptatibus necessitatibus labore eius ea internos quos est ullam alias. Eum ratione optio At facere nulla id accusamus pariatur vel sint omnis sit omnis eveniet in laudantium debitis. Ut architecto corrupti eum consequuntur odio qui illo numquam aut inventore fuga aut laboriosam atque. Et odio molestiae et incidunt enim qui doloribus nihil?
</p>
</div>
</body>
Maybe I messed something up with the <style> section? I mostly don't really know what is happening around there, especially with margins and padding and maybe I've overridden the margins with the main body. I have also seen examples of sidebars made as an entirely different html page within another, and maybe that could help. If you could also help me figure out how to fix the sidebar as well as make it scrollable instead of it filling the whole page, that would be appreciated, thanks.
The z-index property specifies the stack order of an element:
div.sidenav {
width: 240px;
position: absolute;
z-index: 10;
top: 110px;
left: 10px;
background: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding: 8px 0;
border-style: dashed; color: #28eb4c;
text-align: center;
}
div.sidenav a {
padding: 1px 2px 1px 10px;
text-decoration: none;
font-size: 25px;
color: #ed7eeb;
display: block;
}
div.sidenav a:hover {
color: #e3a8e2;
}
div.main {
margin-left: 240px;
padding: 10px 10px;
}
<h1>A Test</h1>
<div class="sidenav">
<h2>Links</h2>
YouTube
Twitter
</div>
<div class="main">
<h2>Some text</h2>
<p>
Lorem ipsum dolor sit amet. In aperiam magnam in quod aliquam ut dolor reprehenderit nam modi fugit ab sunt harum et alias amet. Aut alias magni et perferendis molestias ut veritatis explicabo qui rerum reprehenderit?
</p>
<p>
Ut pariatur soluta ea exercitationem nisi in optio ratione 33 totam modi et ipsam natus? Vel eius suscipit eos voluptatem nihil ut adipisci alias aut quos dolor quo soluta velit.
</p>
<p>
Voluptatibus necessitatibus labore eius ea internos quos est ullam alias. Eum ratione optio At facere nulla id accusamus pariatur vel sint omnis sit omnis eveniet in laudantium debitis. Ut architecto corrupti eum consequuntur odio qui illo numquam aut inventore fuga aut laboriosam atque. Et odio molestiae et incidunt enim qui doloribus nihil?
</p>
</div>
also it is better to use flex or grid
I have a problem with my footer. My footer is under the right section but I want that it will be under the main section on the full-width container.
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: #1F0057;
}
.container {
width: 1400px;
margin-left: 15%;
float: left;
}
nav ul li img {
width: 25px;
padding-left: 5%;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
}
nav ul li a {
vertical-align: middle;
padding-left: 5px;
color: #DAA520;
text-decoration: none;
text-transform: uppercase;
font-size: 1.2rem;
/* border: 1px solid yellow; */
}
nav {
background-color: #1F0057;
width: 100%;
height: 1em;
/* border: 1px solid yellow; */
}
.header {
font-size: 4rem;
color: white;
background-color: rgb(220, 189, 222);
width: 100%;
}
.title {
text-align: center;
color: #696969;
}
main article section {
float: left;
height: 60vh;
}
#first {
/* background-image: url(); */
background-image: url("gimp/cpu1.png");
/* usun "color" */
color: white;
width: 20%;
/* width: 300px; */
}
#second {
padding: 2%;
width: 60%;
height: auto;
background-color: #fff;
background-color: #4800CF;
/* width: 900px; */
}
#third {
width: 16%;
background-color: #5600F5;
height: auto;
/* width: 188px; */
}
main article section header {
font-size: 1.8em;
font-weight: bold;
padding: 2%;
}
main article section figure {
font-size: 1.2rem;
font-weight: bold;
margin-top: 3%;
box-shadow: 2px 2px 5px black;
}
main article section figcaption {
font-size: 1.1rem;
text-indent: 1.5em;
padding-top: 2.5%;
text-align: justify;
}
.secondmainmargin {
/* margin: 2%; */
}
.footer {
background-color: white;
font-family: 'Robocot';
font-size: 1.4rem;
text-align: center;
color: #fff;
float: right;
}
.link {
padding: 2%;
}
<div class="container">
<header class="header">
<div class="title">
Podstawowe podzespoły i parametry sprzętu komputerowego
</div>
<nav class="navbar">
<ul>
<li><img src="img/house.png" alt="domek"></li>
<li>Obudowa</li>
<!-- !!!!!przy "strony nie może być "/" czyli "/strony.obudowa.html"!!!!! -->
<li>Płyta główna</li>
<li>Procesor</li>
<li>Karty rozszerzeń</li>
<li>Pamięć Operacyjna</li>
<li>Pamięci masowe</li>
<li>Zasilacz</li>
<li>Inne</li>
</nav>
</header>
<main class="main">
<article>
<section id="first">
<img src="gimp/cpu1.png" alt="procesor" width="100%;">
</section>
<section id="second">
<header>
Nagłówek sekcji
</header>
<div class="secondmainmargin">
<figure>Podtytuł pierwszy</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore laborum explicabo beatae dignissimos consectetur, asperiores quod, culpa velit expedita vitae, id hic voluptatem soluta eius alias. Animi sequi deserunt dolorem incidunt iure laudantium
laborum nemo quia ullam blanditiis, voluptatem ea a odit quae, repellendus dicta consequuntur provident ab exercitationem itaque molestias, dolor. Et, ipsa, iusto. Deserunt labore provident ad adipisci sed aliquid natus nihil.
</figcaption>
<figure>Podtytuł drugi</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos modi laborum repudiandae error temporibus ullam consectetur in molestiae exercitationem quos, expedita cum, odit voluptatum quod illo vitae. Dolorum aperiam unde ducimus maxime aut
iusto distinctio ipsum nisi eveniet illo atque tempore, eius error ex, cupiditate! Provident doloribus voluptatibus dignissimos, sed!
</figcaption>
<figure>Podtytuł trzeci</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facilis ducimus beatae doloribus possimus fugiat iste aliquid, laudantium ab omnis veniam porro nemo explicabo. Inventore totam consequuntur expedita, distinctio exercitationem, eaque sint accusantium
libero voluptas sunt eligendi. Dolorum enim, consectetur perferendis veritatis impedit adipisci quo optio maiores odit accusantium tempora eaque blanditiis explicabo eligendi nam dolore placeat natus pariatur?dawdawdadawd Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Amet, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ipsa pariatur a, sequi provident id dolor cupiditate dolorum consectetur, ea aliquid sint nesciunt nobis perspiciatis vitae
deserunt, molestiae odit fugit. Tempore quae natus enim reprehenderit aspernatur ratione illo neque assumenda, beatae nihil, ipsa incidunt minima, qui? Delectus animi velit quam distinctio est rem, itaque tempore placeat odio tenetur ipsam
iure consequuntur ex dolorum nulla sunt provident quibusdam harum fugiat et. Ex praesentium sunt, est qui distinctio. Laboriosam quo molestias neque numquam autem suscipit impedit, quaerat optio dolores veritatis sint sequi dolorem necessitatibus
molestiae, ex, incidunt modi porro eius natus perspiciatis!
</figcaption>
</div>
</section>
<section id="third">
<div class="link">
<header>Linki</div>
</header>
</section>
</article>
</main>
<footer class="footer">
Made by: Filip
</footer>
</div>
code with css: https://codepen.io/FilipoV/pen/jOyyNxR
add this to your .footer-class:
.footer{
display:block;
clear:both;
}
and remove
float:right;
I'm working on a project in React and ran into a problem that has me stumped.
I want to add footer component but its not working properly.
so here is my code and i am not able to figure out how to keep footer at bottom of my page when ever i scroll down.
if any one have some solution it will be really great if you help me
when i load my page footer componet look like this at bottom of my page
but when i scroll up then it look like this
i am wirting this code in different page (footer.jsx) with footer.module.css and calling in my app.js
Footer.jsx
import React from "react";
import footerStyles from "../styles/Footer.module.css";
import { FaTwitter, FaFacebook, FaInstagram } from "react-icons/fa";
function Footer() {
return (
<div id={footerStyles.copyright}>
<p>
© Team NexT LeVeL. All rights reserved. | Design by Team NexT
LeVeL
</p>
<ul className={footerStyles.contact}>
<li>
<a href="/#">
<FaTwitter size="2em" color="cyan" />
</a>
</li>
<li>
<a href="/#">
<FaFacebook size="2em" color="#00acee" />
</a>
</li>
<li>
<a href="/#">
<FaInstagram size="2em" className={footerStyles.insta} />
</a>
</li>
</ul>
</div>
);
}
export default Footer;
my footer.module.css look like this
#copyright {
margin: 0;
width: 100%;
border-top: 20px solid rgba(255, 255, 255, 0.08);
text-align: center;
background: #333333;
position: absolute;
left: 0;
bottom: 0;
right: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
flex: 0 0 25%;
}
#copyright p {
display: inline;
letter-spacing: 1px;
font-size: 16px;
color: white;
}
#copyright a {
text-decoration: none;
color: white;
}
/*footer icon*/
ul.contact {
list-style: none;
}
ul.contact li {
display: inline;
font-size: 1em;
padding: 10px;
}
ul.contact li span {
margin: 20px;
}
ul.contact li a {
color: white;
}
ul.contact li a:before {
display: inline;
background: #4c93b9;
line-height: 40px;
text-align: center;
color: rgba(255, 255, 255, 1);
}
.insta {
border-radius: 10px;
background: radial-gradient(
circle at 30% 107%,
#fdf497 0%,
#fdf497 5%,
#fd5949 45%,
#d6249f 60%,
#285aeb 90%
);
}
Try using
position: fixed;
instead of
position: absolute;
Also, I would suggest floating the element to make sure that the rest of the page isn't moving out of it's way incorrectly:
float: left;
And then add a padding to the bottom of your body tag with a height taller than your footer, to ensure you don't totally cover anything up
body {
padding-bottom: 100px;
}
Follow this structure.
const App = () => (
<div style={{paddingBottom: 50}}>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, molestiae. Magni quibusdam doloremque optio rerum ex assumenda mollitia suscipit praesentium, exercitationem ea perspiciatis aut, voluptatum necessitatibus numquam totam. Commodi distinctio nisi non? Voluptas exercitationem nemo aut rem sint? Recusandae nam quisquam maiores sapiente ratione deleniti, corrupti impedit laboriosam voluptatibus repudiandae qui cumque voluptatem labore necessitatibus sed quidem nemo cum, vitae consequatur rem corporis quibusdam non voluptates quia. Amet ipsum ex, dolore quaerat omnis animi placeat totam alias suscipit eveniet voluptate doloremque nisi repellendus sit incidunt, voluptates ratione ea autem esse maiores, qui quasi? Possimus, velit quibusdam! Natus accusantium voluptatem asperiores.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, molestiae. Magni quibusdam doloremque optio rerum ex assumenda mollitia suscipit praesentium, exercitationem ea perspiciatis aut, voluptatum necessitatibus numquam totam. Commodi distinctio nisi non? Voluptas exercitationem nemo aut rem sint? Recusandae nam quisquam maiores sapiente ratione deleniti, corrupti impedit laboriosam voluptatibus repudiandae qui cumque voluptatem labore necessitatibus sed quidem nemo cum, vitae consequatur rem corporis quibusdam non voluptates quia. Amet ipsum ex, dolore quaerat omnis animi placeat totam alias suscipit eveniet voluptate doloremque nisi repellendus sit incidunt, voluptates ratione ea autem esse maiores, qui quasi? Possimus, velit quibusdam! Natus accusantium voluptatem asperiores.
</p>
<Footer/>
</div>
)
function Footer() {
return (
<div style={{
display:"flex",
position:"fixed",
width:"100%",
height: 50,
backgroundColor: "grey",
bottom: 0,
}}>
<p>
© Team NexT LeVeL. All rights reserved. | Design by Team NexTLeVeL
</p>
<ul style={{display:"flex"}}>
<li>
<a href="/#">
Twitter
</a>
</li>
<li>
<a href="/#">
Facebook
</a>
</li>
<li>
<a href="/#">
Instagram
</a>
</li>
</ul>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
If you resize the browser there is a gap between the bottom of the .services-items and the parent div (.services). Here's the code:
#one {
background-color: #fff;
height: 50%;
width: 100%;
}
#two {
background-color: #fff;
height: 50%;
width: 100%;
}
body,
html {
height: 100%;
background-color: #000;
}
* {
margin: 0;
}
.services {
background: green;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 0 50px;
color: #fff;
}
.services-items {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background-color: rgba(0, 0, 0, 0.5);
padding: 50px;
height: auto;
text-align: center;
position: relative;
}
.services-items h2 {
margin: 20px 0;
}
.services-items p {
line-height: 150%;
}
<div id="one"></div>
<div class="services">
<a>
<div class="services-items">
<h2>Service 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique amet atque recusandae, consequatur facere nesciunt. Placeat nostrum, aliquam suscipit. Tempore obcaecati sed eligendi cumque! Quo et, quod veniam nulla maxime quos voluptas harum
odio ipsam libero repellat dicta hic. Eos!</p>
</div>
</a>
<a>
<div class="services-items">
<h2>Service 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur vitae illum, alias suscipit ipsa soluta optio eos officia ducimus incidunt maiores molestias velit, delectus libero, ad eaque repellendus. Rerum, rem doloribus, cupiditate
quos ex hic porro distinctio beatae. Vero, harum, autem. Quo itaque assumenda, mollitia et repellendus vel porro.</p>
</div>
</a>
<a>
<div class="services-items">
<h2>Service 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium error et animi, porro omnis facilis voluptatum vel voluptatem pariatur quasi debitis in ratione voluptas eos ex maiores adipisci, nesciunt aliquid alias maxime accusamus veritatis?
Dignissimos, perspiciatis deserunt numquam animi rerum aliquid mollitia, blanditiis dolore architecto.</p>
<h3>Jos haluat tämän palvelun/tuotteen, ota yhteyttä ja kerro viestissä.</h3>
</div>
</a>
</div>
<div id="two"></div>
Add height:100% to service-items and also add
*{box-sizing:border-box;} to your css file
This is require because border-box
Include padding and border in the element's total width and height:
*{box-sizing:border-box;}
#one {
background-color: #fff;
height: 50%;
width: 100%;
}
#two {
background-color: #fff;
height: 50%;
width: 100%;
}
body,
html {
height: 100%;
background-color: #000;
}
* {
margin: 0;
}
.services {
background: green;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 0 50px;
color: #fff;
}
.services-items {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background-color: rgba(0, 0, 0, 0.5);
padding: 50px;
height: 100%;
text-align: center;
position: relative;
}
.services-items h2 {
margin: 20px 0;
}
.services-items p {
line-height: 150%;
}
<div id="one"></div>
<div class="services">
<a>
<div class="services-items">
<h2>Service 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique amet atque recusandae, consequatur facere nesciunt. Placeat nostrum, aliquam suscipit. Tempore obcaecati sed eligendi cumque! Quo et, quod veniam nulla maxime quos voluptas harum
odio ipsam libero repellat dicta hic. Eos!</p>
</div>
</a>
<a>
<div class="services-items">
<h2>Service 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur vitae illum, alias suscipit ipsa soluta optio eos officia ducimus incidunt maiores molestias velit, delectus libero, ad eaque repellendus. Rerum, rem doloribus, cupiditate
quos ex hic porro distinctio beatae. Vero, harum, autem. Quo itaque assumenda, mollitia et repellendus vel porro.</p>
</div>
</a>
<a>
<div class="services-items">
<h2>Service 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium error et animi, porro omnis facilis voluptatum vel voluptatem pariatur quasi debitis in ratione voluptas eos ex maiores adipisci, nesciunt aliquid alias maxime accusamus veritatis?
Dignissimos, perspiciatis deserunt numquam animi rerum aliquid mollitia, blanditiis dolore architecto.</p>
<h3>Jos haluat tämän palvelun/tuotteen, ota yhteyttä ja kerro viestissä.</h3>
</div>
</a>
</div>
<div id="two"></div>
One more solution for your code
.services a {
display: flex;
align-self: stretch;
}
I have a PSD which I have to convert to html. I have a problem with some elements, to be more precise I have no idea how to create it, furthermore I don't know how to name it to find examples in google. Looking for your advices. Those arrows should be responsive(become longer or shorter)
I would give the background the dashed lines. Then I would position the icons along with their arrow heads at the top, bottom, and middle using css. Then as the element grows and shrinks the icons move with the sizing and cover the dashed lines in the background.
Here, I got you started...
.container {
box-sizing: border-box;
width: 80%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.top-dash {
position: relative;
width: 100%;
height: 30px;
margin-bottom: 1em;
background-color: black;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-dash:before {
content: "";
position: absolute;
left: 0;
top: 13px;
width: 100%;
border-top: 5px dashed orange;
}
[class*="word"] {
display: block;
padding-right: 1em;
background-color: black;
color: orange;
font-size: 18px;
font-weight: bold;
z-index: 5;
}
[class*="word"]:first-child {
padding-left: 1em;
}
[class*="word"]:nth-child(n+2):before {
content: ">";
padding-right: 1em;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0 2em;
border-left: 60px solid blue;
}
.side-dash {
position: absolute;
left: -60px;
top: 0;
width: 60px;
height: 100%;
overflow: hidden;
display: flex;
}
.side-dash:before {
content: "";
position: absolute;
left: 28px;
top: 0;
height: 100%;
border-left: 5px dashed white;
}
<div class="container">
<div class="top-dash">
<span class="word-left">ONE</span>
<span class="word-mid">TWO</span>
<span class="word-right">THREE</span>
</div>
<div class="content">
<div class="side-dash">
<span class="icon-top"></span>
<span class="icon-mid"></span>
<span class="icon-bot"></span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, cupiditate, explicabo! Voluptatibus placeat quod magnam soluta, fuga molestiae consectetur doloribus distinctio ipsum voluptas labore delectus reprehenderit rem voluptate, beatae nesciunt.</p>
<p>Nisi excepturi nobis ipsam perferendis nemo ipsa! Aspernatur quaerat ad, harum sapiente? Adipisci, ea. Aperiam exercitationem unde reiciendis obcaecati dolorem sit vitae animi, ut at quisquam corporis ratione voluptatum modi!</p>
<p>Assumenda explicabo voluptatum ea porro unde quo at praesentium temporibus quae optio, laudantium ab minus vero quas, repellat nihil. Laudantium, facere. Tempora adipisci earum voluptatem deserunt atque eos fugiat debitis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, cupiditate, explicabo! Voluptatibus placeat quod magnam soluta, fuga molestiae consectetur doloribus distinctio ipsum voluptas labore delectus reprehenderit rem voluptate, beatae nesciunt.</p>
<p>Nisi excepturi nobis ipsam perferendis nemo ipsa! Aspernatur quaerat ad, harum sapiente? Adipisci, ea. Aperiam exercitationem unde reiciendis obcaecati dolorem sit vitae animi, ut at quisquam corporis ratione voluptatum modi!</p>
<p>Assumenda explicabo voluptatum ea porro unde quo at praesentium temporibus quae optio, laudantium ab minus vero quas, repellat nihil. Laudantium, facere. Tempora adipisci earum voluptatem deserunt atque eos fugiat debitis.</p>
</div>
</div>