I am working on a flip card for my personal portfolio. I have my divs set to a certain size and I want two in a row, but they won't go to the size I have set and four go in a row instead of the two I want. Here is the all of my code:
/* Whole Page */
body {
margin: 0;
text-align: center;
}
/* Nav */
nav {
display: block;
position: fixed;
background-color: black;
color: white;
width: 100%;
height: 10vh;
border-bottom: solid white 1px;
}
.btns {
display: inline-block;
float: right;
margin-top: -3.25%;
font-family: sans-serif;
width: 30vw;
}
button {
background-color: black;
border: none;
color: white;
display: inline-block;
float: right;
margin-right: 1%;
margin-left: 1%;
font-size: 22px;
cursor: pointer;
}
#logo {
margin-left: 3.5%;
text-align: left;
}
/* Welcome Section */
#welcome-section {
background-image: url(https://www.walldevil.com/wallpapers/a51/2755-city-cityscape-wallpaper-architecture-wallpapers-albums-skylines.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
border-bottom: black 3px solid;
}
h1,
#welcome-section p {
width: 50%;
color: white;
text-align: left;
margin: auto;
font-weight: 800;
}
h1 {
font-size: 60px;
padding-top: 25vh;
font-family: sans-serif;
}
#welcome-section p {
font-size: 27px;
font-family: serif;
}
/* Portfolio */
#projects {
width: 55vw;
margin: auto;
}
#projects-h2 {
font-size: 30px;
text-decoration: underline;
}
.flip-card {
width: 25vw;
height: 25vh;
margin: auto;
position: relative;
perspective: 100vw;
float: left;
}
#media (min-width: 600px) and (max-width: 992px) {
.flip-card {
width: 31%;
margin: 1.16%;
}
}
#media (min-width: 992px) {
.flip-card {
width: 23%;
margin: 1%;
}
}
.flip-card .front,
.flip-card .back {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-size: cover;
transition: 0.3s;
backface-visibility: hidden;
/* Change Colors! */
border: solid 1px #333;
box-shadow: 5px 10px 8px #333;
}
.flip-card:hover .front {
transform: rotateY(180deg) scale(0.5);
}
.flip-card .back {
/* Change Colors! */
background: #333;
color: #FFF;
display: flex;
justify-content: center;
transform: rotateY(180deg) scale(0.5);
}
.flip-card:hover .back {
transform: rotateY(360deg) scale(1);
}
.flip-card .front {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* Contact */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="main.css">
<!-- FreeCodeCamp Tests -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<title>Jacob Pieczynski | Front-end Web Developer</title>
</head>
<body>
<!-- Nav -->
<nav id="navbar">
<h2 id="logo">Jacob Pieczynski</h2>
<div class="btns">
<button>Home</button>
<button>Projects</button>
<button>Contact</button>
</div>
</nav>
<!-- Welcome Section -->
<section id="welcome-section">
<h1>I am Jacob Pieczynski</h1>
<p class="h1-desc">An up and coming teen web developer</p>
</section>
<!-- Projects -->
<section id="projects">
<h2 id="projects-h2">Projects</h2>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
<!-- New Card -->
<div class="flip-card">
<!-- Front -->
<div class="front" style="background-image:url(https://i.imgur.com/ZmJVBHn.png)">
</div>
<!-- Back -->
<div class="back">
<h2 class="card-header">Loren Impus</h2>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact">
<!-- Contact Circle - Instagram -->
<a href="#" id="contact-a">
</a>
<!-- Contact Circle - Email -->
<a href="#" id="contact-a">
</a>
<!-- Contact Circle - FreeCodeCamp -->
<a href="#" id="contact-a">
</a>
<!-- Contact Circle - Github -->
<a href="#" id="contact-a">
</a>
</section>
<!-- Footer -->
<footer id="footer">
</footer>
</body>
</html>
Thanks for the help as this is a major project for me that I am very frustrated with at this point. Have a great day!
It looks like that is happening because you are overriding the width you set with the media queries like for example you have this:
.flip-card {
width: 25vw;
height: 25vh;
margin: auto;
position: relative;
perspective: 100vw;
float: left;
}
Then you have this:
#media (min-width: 600px) and (max-width: 992px) {
.flip-card {
width: 31%;
margin: 1.16%;
}
}
#media (min-width: 992px) {
.flip-card {
width: 23%;
margin: 1%;
}
}
Each of the widths in those media queries are overriding your 25vw, if you remove the width percentages out of each of those media queries or change the width:23% to 48% your cards will go into 2 to each row. The width 23% is telling them to be 23% percentage of the container width which is approximately 1/4 of the width which would cause them to be 4 in a row.
Related
I have made this site(http://koulick-project.surge.sh/)as a project but cannot make it fully responsive. How to make it responsive, so that it looks good on mobile/tablets. So far, I could make the headings and text responsive. But cannot make the circles for the clock responsive.
Here is my Html file-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Pragmatic Mates s.r.o. - http://pragmaticmates.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="demo/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="demo/css/coming_soon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<title>JWOC Coming Soon</title>
</head>
<body>
<div class="centerdiv">
<a href="https://www.facebook.com/jwoc2k20" target="_blank">
<i class="fa fa-facebook fa-3x"></i>
</a>
<a href="https://www.linkedin.com/company/jwoc/" target="_blank">
<i class="fa fa-linkedin fa-3x"></i>
</a>
</div>
<div class="section">
<div class="section">
<div id="particles-js">
<break>
<h1 style="color:white"><b>JWOC</b></h1>
<h1 style="color:white"><b> COMMENCING SOON</b></h1>
<hr>
</div>
</div>
</div>
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-xs-3 col sm-3">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-seconds countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
</div><!-- /.clock -->
<hr>
</div><!-- /.countdown-wrapper -->
<!-- footer section -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="demo/js/kinetic.js"></script>
<script type="text/javascript" src="jquery.final-countdown.js"></script>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$('.countdown').final_countdown({
'start': 2062139200,
'end': 2088461320,
'now': 2087461319
});
});
</script>
</body>
</html>
Here is my Css file-
*{
margin: 0;
padding: 0;
}
html, body {
background-repeat:no-repeat;
height: 100vh;
overflow:hidden;
}
html {
background-image: url('../img/open.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/open1.jpg');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
#particles-js
{
z-index: 99999;
height: 500%;
display: flex;
justify-content: center;
align-items: left;
}
.particles-js-canvas-el{
position: absolute;
width: 100%;
height: 100%;
z-index: 99999;
}
h1{
font-size: 70px;
letter-spacing: 15px;
text-align: center;
}
a{
height: 100px;
width: 100px;
border-radius: 50px;
text-align: center;
margin: 10px;
line-height: 110px;
}
a i{
transition: all 0.3s linear;
}
a:hover i{
transform: scale(1.4);
}
.fa-linkedin{
color: #0097e6;
}
.fa-facebook{
color: #3b5998;
}
/*
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
*/
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media only screen and (min-width: 393px) and (max-width: 767px) {
h1{
font-size: 40px;
letter-spacing: 10px;
}
.text {
font-size: 15px;
}
.text .val {
font-size: 15px;
}
.text .type-time {
font-size: 15px;
}
.clock-item .inner {
width: 150%;
}
}
Can anyone please help.
Try using a column break to split up the timer into multiple rows on smaller screen sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#column-breaks
Tablet+
D H M S
Phone
D H
M S
I have a background image that is covering my content but without (background-size: cover;) it doesn't take up the space. I am working on a bootstrap project, and all my content is stacked at the top of the page in the banner area. I've tried adding height to the page to move content. I've tried adding a div around it and moving around in the body tag. I have been working on the for about 3 hours.
#import url('https://fonts.googleapis.com/css?family=Oswald|Rambla|Staatliches&display=swap');
body{
margin: 0;
padding: 0;
}
:root{
--color-black: #000000;
--color-white: #ffffff;
--color-border: #ffffff34;
--font-staat: 'Staatliches', cursive;
--font-os: 'Oswald', sans-serif;
--font-ram: 'Rambla', sans-serif;
}
/* global classes */
.font-staat{
font: normal 400 18px var(--font-staat);
}
.font-os{
font: normal 300 18px var(--font-os);
}
.font-ram{
font: normal bold 18px var(--font-ram);
}
.font-size-40{
font-size: 40px;
}
.font-size-34{
font-size: 34px;
}
.font-size-27{
font-size: 27px;
}
.font-size-20{
font-size: 20px;
}
.font-size-16{
font-size: 16px;
}
.bgcolor-black{
background-color: var(--color-black);
}
/* #global classes */
#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index:1;
transition: left .5s ease;
}
#header nav{
height: 100vh;
}
#header .site-title .navbar-brand{
letter-spacing: 2px;
color: var(--color-secondary);
}
#header .nav-link{
margin: .7rem 1rem;
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
}
#header .nav-link:hover{
color: var(--color-white) !important;
}
#header .toggle-button{
background: none;
color: var(--color-black);
position: fixed;
top: 25px;
right: 20px;
border: 1px solid var(--color-border);
}
.toggle-left{
left: 0 !important;
width: 1000px !important;
}
/* site-main */
.site-banner .banner-area{
background: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.site-banner .banner-area .author{
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.site-banner .banner-area .author .author-img{
width: 250px;
height: 250px;
border-radius: 50%;
margin: auto;
background: url(./20200507_023239272_iOS.jpg) no-repeat;
background-size: 115%;
background-position: 15% 20%;
}
#media screen and (min-width: 768px){
.toggle-button{
display: none;
}
#header{
z-index:0;
}
}
/* #site-main */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaija Dunklin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- header area -->
<header id="header">
<div class="row m-0">
<div class="col-3 bgcolor-black">
<nav class="primary-nav navbar-expand-md">
<div class="site-title text-center text-light py-5">
Kaykay
<p class="description text-uppercase font-os"> Kaija Dunklin</p>
</div>
<div class="d-flex flex-column">
Home
Skills
projects
Education
Experience
Resume
Contact
</div>
</nav>
</div>
</div>
<button class="toggle-button"><span class="fas fa-bars fa-2x"></span></button>
<div class="social">
<span class="mr-3"><i class="fab fa-linkedin"></i></span>
<span class="mr-3"><i class="fab fa-github"></i></span>
</div>
</header>
<!-- #header area -->
<main id="site-main">
<div class="row m-0">
<div class="col-md-9 offset-md-3 px-0">
<!-- site-banner area -->
<section class="site-banner" id="home">
<div class="banner-area">
<div class="author text-center">
<div class="author-img"></div>
<h1 class="text-white font-staat font-size-40 text-uppercase py-3">Kaija Dunklin</h1>
</div>
</div>
</section>
<section id="skills">
<i class="fab fa-github-square" >GitHub</i>
</section>
<!-- #site-banner area -->
<section id="projects">
<div>
</div>
</section>
</div>
</div>
<div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
<script src="./vendor/typed/typed.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
I'm really not sure what you are trying to achieve, but I guess I got what you wanted:
I set the background on separate div which I then set the background image to and then with Z-index value on css moved behind other content you may add on your page.
.background-img {
/*of course with this solution you should remove the previous background image*/
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-image: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg);
background-size: cover;
/* Without z-index the background seems to cover the content*/
z-index: -1;
}
<!--I added this empty div to hold the background image-->
<div class="background-img">
</div>
I really did not dive that deep to your source files, so I am not sure if this helps, but I hope so
I am trying to edit the margin on the nav bar links, however when I change the margin, nothing happens. Does anyone know why this is happening?
/* Whole Page or not one specific section */
main {
text-align: center;
}
body {
max-width: 100%;
height: 100vh;
margin: 0px 0px 0px 0px;
color: #C2D3CD;
}
.topbar, nav {
background-color: #847E89;
}
/* Top Bar */
#temp-logo, #donate-top {
display: inline-block;
}
#donate-top {
float: right;
padding-right: 2%;
padding-left: 2%;
background-color: #C2D3CD;
color: #847E89;
height: 10vh;
cursor: pointer;
}
.donate-name {
padding-top: 4vh;
background-color: #C2D3CD;
border: none;
cursor: pointer;
}
#temp-logo {
padding-top: 0vh;
margin-left: 2%;
font-size: 22px;
}
.topbar {
display: block;
border-bottom: solid 1px #C2D3CD;
height: 10vh;
}
/* Nav Bar */
nav {
text-align: center;
height: 7vh;
}
.link, link:visited {
color: #C2D3CD;
text-decoration: none;
}
#mission-link, #about-link, #donations-link, #contact-link {
margin-top: 5%;
}
/* First Page */
#home-screen {
background-image: url(Images/beach-background-1-NEW.jpg);
height: 80vh;
width: 100%;
background-repeat: no-repeat;
background-size: 100%;
}
.text {
padding-top: 30vh;
}
/* Gallery */
.img {
width: 20vw;
height: 20vw;
}
.desc {
display: inline-block;
position: relative;
margin: 1%;
}
.desc:hover img {
filter: blur(1.5px) brightness(60%);
transition: 0.3s;
box-shadow: 0 0 10px gray;
}
.desc :not(img) {
position: absolute;
top: 37%;
z-index: 1;
text-align: center;
width: 100%;
color: #FFF;
opacity: 0;
transition: 0.3s;
}
.desc:hover :not(img) {
opacity: 1;
}
.img:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Conejo Teen Organization</title>
</head>
<body>
<!-- Top Bar -->
<div class="topbar">
<!-- Get logo ASAP -->
<p id="temp-logo"><em>Conejo Teen Organization</em></p>
<a id="donate-top" class="donate" href="#"><button class="donate-name">Donate</button></a>
</div>
<!-- Nav -->
<nav>
<a id="mission-link" class="link" href="#">Mission</a>
<a id="about-link" class="link" href="#">About Us</a>
<a id="donations-link" class="link" href="#">What We Do</a>
<a id="contact-link" class="link" href="#">Contact</a>
</nav>
<!-- Main -->
<main>
<!-- First Section -->
<section id="home-screen">
<article class="text">
<h1 id="h1">Conejo Teen Organization</h1>
<p id="h1-desc">Helping California teens in need since 2017</p>
<button id="donate-home" class="donate">Donate Now!</button>
</article>
</section>
<!-- Our Mission -->
<section id="mission">
<h2 id="mission-h2">Our Mission</h2>
<p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
</section>
<!-- Image Gallery (images of projects) -->
<section id="gallery">
<h2 id="images">Gallery</h2>
<!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
<div class="row1 row">
<!-- Image 1 -->
<div class="desc-1 desc">
<img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 2 -->
<div class="desc desc-2">
<img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 3 -->
<div class="desc desc-1">
<img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
<h3 id="img-desc">Dec My Room</h3>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p id="copyright">© 2018 Conejo Teen Organization</p>
<p id="my-credit">Created by Jacob Pieczynski</p>
</footer>
</body>
</html>
You're trying to apply margin-top to inline elements which you can't do since it would disrupt the flow of the page:
#mission-link, #about-link, #donations-link, #contact-link {
display: inline-block; /* Try making them inline block */
margin-top: 5%;
}
Try making the links inline-block.
Add display: inline-block like:
#mission-link, #about-link, #donations-link, #contact-link {
margin-top: 5%;
display: inline-block;
}
I have checked your code remove: height: 10vh; from topbar class
My question is how to position these cards on my website?
https://imgur.com/a/Ompfh
It would be easy if there isn't this half circles above them.
I have tried to create parent class="cards" and class="card" for each of 3 cards.
In css:
.cards { display: flex }
.card { width: 33.33% }
And set relative position to my background and absolute position to my half-circles but I want to do it without absolute and relative positions if it's possible.
.cards {
display: flex;
}
.card {
width: 33.33%;
color: #fff;
text-align: center;
}
.card p {
min-height: 80px;
padding: 0 39px 0 39px;
}
.strategy--logo {
position: absolute;
top: 383px;
left: 607px;
width: 96px;
height: 48px;
background-color: #5a471b;
border-top-right-radius: 48px;
border-top-left-radius: 48px;
}
.strategy {
margin-top: 135px;
background-color: #5a471b;
}
.crop--marketing {
margin-top: 135px;
background-color: #9fa374;
}
.risk--mgmt {
margin-top: 135px;
background-color: #666;
}
<div class="cards">
<div class="card">
<div class="strategy">
<div class="strategy--logo">
<img src="css/images/strategy-logo.png" alt="" />
</div>
<!-- /.strategy-/-logo -->
<h2>
</h2>
<p>
</p>
</div>
<!-- /.crop-/-marketing -->
</div>
<!-- /.card -->
<div class="card">
<div class="crop--marketing">
<img src="css/images/crop-logo.png" alt="" />
<h2>
</h2>
<p>
</p>
</div>
<!-- /.crop-/-marketing -->
</div>
<!-- /.card -->
<div class="card">
<div class="risk--mgmt">
<img src="css/images/arrow-logo.png" alt="" />
<h2>
</h2>
<p>
</p>
</div>
<!-- /.risk-/-mgmt -->
</div>
<!-- /.card -->
</div>
<!-- /.cards -->
Now I'm using absolute and relative but is there another way? Because when I resize my web browser the circles go away random ...
Are you trying to achieve this?
.card {
displaY: block;
float: left;
width: 33.33%;
text-align: center;
color: white;
font-family: 'Calibri';
}
.icon {
width: 50px;
height: 25px;
/*half of width*/
margin: auto;
display: block;
border-radius: 50px 50px 0 0;
}
.fa {
margin-top: 10px;
}
.text {
padding: 25px;
}
.strategy .text,
.strategy .icon {
background-color: #5c471c;
}
.crop .text,
.crop .icon {
background-color: #a0a175;
}
.risk .text,
.risk .icon {
background-color: #666666;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="card strategy">
<div class="icon">
<i class="fa fa-area-chart" aria-hidden="true"></i>
</div>
<div class="text">
Our Strategy
</div>
</div>
<div class="card crop">
<div class="icon">
<i class="fa fa-pagelines" aria-hidden="true"></i>
</div>
<div class="text">
Crop Marketing
</div>
</div>
<div class="card risk">
<div class="icon">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</div>
<div class="text">
Commodity Risk Management
</div>
</div>
Is the main problem that when you use position your layout changes its position elsewhere?
If so, to use position property is ok if you make a few changes:
CSS
.strategy--logo {
position: absolute;
/* Remove this top parameter, use transform instead */
/* top:383px; */
/* Instead your value of a left use value of 50% and transform left
and right properties like it is changed below */
/* left: 607px; */
left: 50%;
transform: translate(-50%, -100%);
width: 96px; height: 48px;
background-color: #5a471b;
border-top-right-radius: 48px;
border-top-left-radius: 48px;
}
.strategy {
/* add position relative to a parent of strategy-logo */
position: relative;
margin-top: 135px;
background-color: #5a471b;
}
Then your code will stay in the same position even if you resize the screen.
My ultimate goal is to be able to fit my grid in 2 columns perfectly and also so it fits entire screen on my mobile devices. Right now, I still have to scroll down a bit, however that is not what I wanted. I want my screen to be not scrollable but have images/screen fit in perfectly the way I desire. Getting rid of spaces in between 2 columns perhaps. Right now my screen looks bit off and needs a little scrolling. The 2 pictures on the bottom doesn't fit and requires scrolling like shown on the picture.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/swiper.min.css') }}">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
top: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-y: auto;
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body {
margin: 0;
padding: 0;
background-color: white;
font: 10px/13px 'Lucida Sans', sans-serif;
}
.wrap {
overflow: hidden;
margin: 10px;
}
.box {
float: center;
position: relative;
width: 200%;
padding-bottom: 100%;
}
.boxInner {
position: absolute;
left: 50px;
right: -5px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.fixed {
position: absolute;
left: 30px;
right: 10px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 79%;
height: 75%
}
.boxInner img.img2 {
width: 100%;
height: 50%
}
body.no-touch .boxInner:hover .titleBox,
body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 100;
}
#media only screen and (max-width: 480px) {
/* Smartphone view: 1 tile */
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.box {
width: 50%;
padding-bottom: 30%;
}
}
.topnav {
overflow: hidden;
background-color: #66CDAA;
}
.topnav a {
float: center;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #98FB98;
color: white;
}
.topnav .icon {
display: none;
}
.header1 {
margin: auto;
float: center;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body class="no-touch">
<!-- Swiper -->
<div class="topnav" id="myTopnav">
Let's Get To Know You!
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Define all of the tiles: -->
<div class="header1">What's your skin color?</div><br><br>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/U8pJVY0.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/Kz06qEO.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/43tH7Td.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/3uZKpV2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/SF3vYC9.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/8hujzfl.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/cxvELu2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/zLD3Nv1.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/baYebAV.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/iLd0ukK.png" />
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="../dist/js/swiper.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='swiper.min.js') }}"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
</script>
<script type="text/javascript">
$(function() {
// See if this is a touch device
if ('ontouchstart' in window) {
// Set the correct body class
$('body').removeClass('no-touch').addClass('touch');
// Add the touch toggle to show text
$('div.boxInner img').click(function() {
$(this).closest('.boxInner').toggleClass('touchFocus');
});
}
});
</script>
</body>
</html>
It's because your "swiper container" is height:100%, but starts 33px down because of the element above it. You could try calc() css if your browser target range allows it in order to make it 100% height minus the height of the element above. Something like:
height: calc(100% - 33px);