Div does not center in another div - javascript

I have an extremely simple issue. I have nested divs. where I am trying to center a div(.gridcontainer) in div(.main). If you run the below snippet, you can see that the div does center full in the main div. It leaves the spaces uneven on the either side horizontally and vertically.
I have tried a lot of fixes and even tried dynamically centering them on load through JS. But, somehow it does not achieve the results.
I just want it to be the exact size of the parent but have little spaces left on each sides evenly.
body {
margin: 0;
padding: 0;
}
.tops {
position: fixed;
background: rgba(0,0,0,0.70);
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-height: 100vh;
min-width: 100vw;
height: auto;
width: auto;
overflow: hidden;
}
.top_menu {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 70px;
background-color: green;
overflow: hidden;
}
.welcome {
position: relative;
top: 0;
bottom: 0;
left: 0;
min-height: 100vh;
min-width: 50%;
height: auto;
width: auto;
}
.welcome_message {
font-family: 'Palanquin Dark', sans-serif;
font-size: calc(2.5vw + 3vh);
position: relative;
top: 30%;
left: 50%;
margin: 0;
float: left;
color: white;
display: inline-block;
overflow: hidden;
transform: translate(-50%, -30%);
}
.app_name {
font-size: calc(1.5vw + 2vh);;
}
.gradientText {
background: -webkit-linear-gradient(#FFA07A, #8B0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.downloadButton{
position: absolute;
top: 75%;
left:50%;
background-color: white;
width: 225px;
height: 50px;
border-radius: 25px;
border-width: 0px;
display: inline-block;
overflow: hidden;
transform: translate(-50%, -75%);
transition: all .2s ease-in-out;
}
.downloadButton:hover
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: translate(-50%, -75%) scale(1.1);
}
.downloadText {
position: relative;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: 1.4em;
font-weight: bold;
color: black;
}
.iphone {
position: relative;
top: 0;
bottom: 0;
right: 0;
min-height: 100vh;
min-width: 50%;
height: auto;
width: auto;
}
.iXFrame {
position: absolute;
height: 700px;
width: 350px;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
}
.main {
position: absolute;
display: block;
margin-top: 75px;
height: auto;
overflow: hidden;
width: auto;
min-width: 100vw;
min-height: 50vh;
}
.gridcont{
position : absolute;
/*height: auto;*/
width: auto;
/*min-height: 95vh;*/
min-width: 95vw;
margin: 0;
border-radius: 20px;
display: inline-block;
background-color: whitesmoke;
/*overflow: hidden;*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Montserrat|Palanquin+Dark|Paytone+One|Rubik|Rubik+Mono+One" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<section class="mains ui">
<div
class="tops"></div>
<!--.top_menu-->
<div class="ui grid marg-reset">
<div class="doubling two column row">
<div class="ui column welcome">
<h1 class="welcome_message"><span class="app_name">Example</span><br>we will<br>rock <br>you<br><span class="gradientText">Text</span></h1>
<a class="downloadButton" type="button" href="/app">
<div class="downloadText">Download Spotmi</div>
</a>
</div>
</div>
</div>
<div class="main">
<div class="ui grid gridcont">
<div class="doubling two column row">
<div class="ui column show_text">
<h1 class="emotion_message">Hello world</h1>
</div>
<div class="ui column emotion_show"></div>
</div>
</div>
</div>
</section>
This also poses an issue in the responsive nature of the site. Below are two screenshots. one of a HiDPI Laptop screen and other is a iphone X simulator. This even poses an issue there.
iPhoneX size screen.
Laptop Screen.
How exactly can I solve this?

Have you tried giving the giving the internal div that you want to center CSS properties:
position: relative;
top: 50%;
left 50%;
transform: translate(-50%, -50%);
this usually solves my balancing issues xD

Related

How do I mirror a card or the word in css

I need help with this CSS, when I hover to see the details of the movie it flip but the whole word in it flip too.
Is there a way that I can make the word flip first and then when I hover the word becomes normal?
This is the HTML code, it was written in JS file and the CSS code.
body {
background-color: var(--primary-color);
font-family: 'Poppins', sans-serif;
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.overview {
background-color: white;
padding: 2rem;
position: absolute;
left: 0;
bottom: 0;
right: 0;
max-height: 100%;
transform: translateY(101%);
}
.movie:hover .overview {
transform: rotateY(180deg);
transition: transform 0.3s ease-in;
overflow-y: auto;
}
<img href = "#" src =https://i.pinimg.com/originals/a4/7b/a5/a47ba59b4a353e0928ef0551ca44f980.jpg>
<div class="movie-info">
<h3>Title</h3>
</div>
<div class="overview">
<h3>Overview</h3>
lorem ipsuim
<br/>
</div>
.card {
position: reletive;
height: 400px;
width: 250px;
font-size: 32px;
text-align: center;
}
.card__side--back {
height: 400px;
width: 250px;
/* background-color: orange; */
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
background-color: orange;
transform: rotateY(180deg);
}
.card__side--front {
height: 400px;
width: 250px;
/* background-color: orange; */
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
background-color: teal;
}
.card:hover .card__side--front {
transform: rotateY(-180deg);
}
.card:hover .card__side--back {
transform: rotateY(0);
}
<div class="card">
<div class="card__side">
<div class="card__side--front">This is the front </div>
<div class="card__side--back"> This is the back</div>
</div>
</div>
From my understanding this is what you were trying do achieve. The key here is backface-visibility and hovering on the container that contains both cards, because when hidden it cant be hovered over.

how do I maintain Aspect Ratio 16/9 on a div and not have it bleed outside the container?

What I need is
x[]x
AND
x
[]
x
dynamically maintaining aspect ratio with WIDTH and HEIGHT. Think object-fit but for div.
Example of the problem: https://codepen.io/anon/pen/erRvGx?editors=1111
What I have tried without much success
.AspectRatio {
height: 0;
overflow: hidden;
padding-top: 56.25%;
background: white;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.video {
background: yellow;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
like this ?
.box1 { width: 200px; height: 100px; position: relative; background-color: red; margin-bottom: 20px; }
.box2 { width: 100px; height: 150px; position: relative; background-color: red; margin-bottom: 20px; }
.box3 { width: 300px; height: 300px; position: relative; background-color: red; margin-bottom: 20px; }
.video { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: yellow; }
<div class="box1">
<div class="video"></div>
</div>
<div class="box2">
<div class="video"></div>
</div>
<div class="box3">
<div class="video"></div>
</div>
top: 50%; left: 50%; transform: translate(-50%, -50%); this code solves the problem

How to center logo in navbar when there's another element in the navbar also?

In my navigation bar there is a logo which should be centered, and a menu button image (3 lines) which should be floated left. I've gotten the menu button to float left but just cannot seem to get the logo to be in the exact center of navbar, it's always a bit to the right.
I've tried puttin them both in divs and setting div width to 50%, then float the image left so it makes it centered but no luck.
HTML:
<div id="resp-navbar">
<div id="resp-nav-contents">
<img id="exp-menu-img" src="3lines.png">
<img id="resp-logo" src="MSLOGO.jpg">
</div>
</div>
CSS:
#resp-navbar{
height: 15%;
text-align: center;
width: 100%;
display: inline-block;
position: fixed;
z-index:51;
background-color: white;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
}
#resp-nav-contents{
min-width: 300px;
}
#exp-menu-img{
height: 30%;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
}
#resp-logo{
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline;
}
Added: left: 0; right: 0; margin: auto; to #resp-logo
#resp-navbar{
height: 15%;
text-align: center;
width: 100%;
display: inline-block;
position: fixed;
z-index:51;
background-color: white;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
}
#resp-nav-contents{
min-width: 300px;
}
#exp-menu-img{
height: 30%;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
}
#resp-logo {
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline;
left: 0;
right: 0;
margin: auto;
}
<div id="resp-navbar">
<div id="resp-nav-contents">
<img id="exp-menu-img" src="https://placehold.it/20x20">
<img id="resp-logo" src="https://placehold.it/500x100">
</div>
</div>
Try setting the menu icon as position: absolute; and normalize the rest
Use the following which may help
<div id="resp-navvar>
<img id="exp-menu-img" src="3lines.png">
<img id="resp-logo" src="MSLOGO.jpg">
#resp-logo {
positions:absolute;
left:50%;
Transform:translate(-50%);
Width- custom, height- custom
}
Don’t forget to put the root div position to relative if things don’t work
Remove these from #resp-logo
position: absolute; display: inline;
Or You can force it to center using margins.

Centering div vertically and horizontally

Is there any way to center .polygon_container and .polygon vertically and horizontally? Also is there a possibility to make the size of it responsive like the <img> tag below?
http://cichyone.linuxpl.eu/ranestwen/ex/
I've tried text-align, margin auto etc and nothing works.
When I set it in the middle using margin-left and margin-top it is working only for one resolution.
Just Use following css
.slider .polygon_container {
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
color: white;
height: 500px;
text-align: center;
width: 500px;
z-index: 99999;
}
.slider .polygon {
color: white;
height: 500px;
margin: auto;
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width: 500px;
z-index: 99999;
}
You can easily use flexbox.
.owl-item > div {
display: flex;
justify-content: center;
align-items: center;
}
You can Center the polygon div using tansform:
I created the following HTML:
<div class="polygon_container">
<div class="polygon">
<h1>hello</h1>
</div>
</div>
And for that I´m using this css:
body
{
margin: 0;
padding: 0;
}
.polygon_container
{
width: 100%;
height: 100%;
background: red;
}
.polygon
{
width: 50%;
height: 50%;
background: white;
transform: translateX(50%) translateY(50%);
}
Hope this is a solution for you.
Yes it is possible. Try this.
.polygon_container {
position: absolute;
height: 500px;
width: 500px;
top: 50%;left: 50;
margin-left: -250px;
margin-top: -250px;
}
html, body {
height: 100%;width: 100%;
margin: 0;padding: 0;
}
.container {
height: 100%;width: 100%;
background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
background-size: cover;
}
.polygon_container {
position: absolute;
height: 100px;
width: 100px;
left: 50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.polygon_container .polygon {
background: #fff;
height: 100%;
width: 100%;
transform: rotate(45deg);
}
<div class="container">
<div class="polygon_container">
<div class="polygon"></div>
</div>
</div>
.slider .polygon_container {
width: 500px;
height: 500px;
position: absolute;
z-index: 99999;
text-align: center;
color: white;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Updated your class.

Positioning trouble

So I'm having some issues with putting a some content with putting some content below my hero / jumbotron image. The underline stuff is not important! It is animtated on load with some jquery. Code Below:
JSFiddle
I want to "What we do" content below the jumbotron image
HTML:
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
<div id="underline-1"></div>
<div id="underline-2"></div>
<div id="underline-3"></div>
<div id="underline-4"></div>
</div>
<img class="hero-img" src="img/city-night.png" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
CSS:
.hero{
position: fixed;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: absolute;
width: 640px;
height: 125px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: relative;
height: 30%;
background-color: #eeeeee;
z-index: 100;
}
This will solve your problem, however as your screen gets vertically smaller you will notice the text at the bottom slowly disappearing. This is because you are using %'s to define the dimensions of the elements, as the screen shrinks the box will be smaller relative to your screen size. To solve this, change the 10% I used for .wwd-main to 90px.
body {
margin: 0;
padding: 0;
}
.hero{
position: fixed;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: absolute;
width: 640px;
height: 125px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: fixed;
bottom:0;
width:100%;
height: 10%;
background-color: #eeeeee;
z-index: 100;
}
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
</div>
<img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
edit: What I did to solve the issue was change .wwd-main from position:relative; to position:fixed; and added bottom:0; This ensures the text will always be fixed to the bottom of your screen with a 0px offset.
You could just remove position: fixed; from .hero.
And add this to your CSS, to collapse the margins:
.wwd-main > h1
{
margin: 0;
}
You have defined the Height and Width of the text twice.
Here is the changed version of the code.
You can now customize your styling to make it look the way you want.
PS: I would recommend you to use Bootstrap or any other libraries.
body {
margin: 0;
padding: 0;
}
.hero{
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: fixed;
width: 640px;
height: 125px;
top: 20%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: relative;
height: 20%;
background-color: #eeeeee;
z-index: 100;
}
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
</div>
<img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
JSFiddle Link

Categories