I am trying to make a footer that displays a button on the left, and 3 social media icons on the right and a copyright text below it which I seem to have working fine. The issue is for mobile im then trying to make it so they all stack on top of one another but the button and icons seem to be overlapping each other.
HTML
<div class="footer">
<div class="footerHeader">
<div>
<a id="login" href="/login" class="btn btn-primary">Sign in</a>
</div>
<div class="socialMedia">
<img alt="Facebook" class="icon zoom" src="/images/facebook.png">
<img alt="Instagram" class="icon zoom" src="/images/instagram.png">
<img alt="Twitter" class="icon zoom" src="/images/twitter.png">
</div>
</div>
<!-- Copyright -->
<div class="footerCopyright">© 2022 Copyright:
NAME
</div>
</div>
CSS
.footer{
background-color: white;
padding-top:20px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 5px;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.footerHeader{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
padding: 0px;
width: 100%;
}
.socialMedia{
width: 64px;
height: 64px;
display: flex;
justify-content: space-evenly;
float: right;
}
.icon{
margin-right: 10px;
margin-left: 10px;
width: 64px;
height: 64px;
transition: transform .2s;
}
.footerCopyright{
margin: 10px;
}
Media querys for footer:
.footer{
min-height: 50vh;
justify-content: space-between;
}
.footerHeader{
flex-direction: column;
justify-content: space-evenly;
padding: 0px;
height: 25vh;
}
.socialMedia{
flex-direction: column;
}
.icon{
margin: 0 auto;
margin-bottom: 20px;
}
This is minimum working demo code in which you can make changes and use it.
.top {
display: flex;
justify-content: space-between;
}
.social-media {
display: flex;
flex-flow: row;
}
.social-media img {
margin-left: 10px;
}
.footerCopyright {
margin-top: 10px;
}
#media screen and (max-width: 480px) {
.social-media {
flex-flow: column;
margin-top: 10px;
margin-bottom: 10px;
}
.social-media img {
margin-left: 0;
margin-top: 10px;
}
.top {
display: block;
}
}
<div class="footer">
<div class="top">
Button
<div class="social-media">
<img alt="Facebook" class="icon zoom" src="/images/facebook.png">
<img alt="Instagram" class="icon zoom" src="/images/instagram.png">
<img alt="Twitter" class="icon zoom" src="/images/twitter.png">
</div>
</div>
<div class="footerCopyright">© 2022 Copyright:
NAME
</div>
</div>
Related
I am trying to wrap div text with flex but its not working, the title div seems to be overlapping the other post divs, I have tried using line height and applying flex wrap, still no fix. I've also tried centering with css grid but that didn't seem to get either,If anyone can help me with this thank you.
*,
*::before,
*::after {
font-family: Mukta, sans-serif;
}
body {
margin: 0;
padding: 0;
}
#header {
display: flex;
flex-direction: column;
gap: 25px;
justify-content: center;
align-items: center;
width: 100%;
height: 20%;
}
#quote {
display: flex;
font-weight: 300;
font-size: 20px;
}
#name {
font-size: 55px;
}
#navlist {
display: flex;
padding-inline-start: 0px;
gap: 40px;
}
#navlistelm {
padding: 15px 38px;
font-size: 20px;
font-weight: 200;
list-style: none;
}
#navbar {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 20%;
}
#navimgcontainer {
display: flex;
flex-direction: row;
width: 100%;
height: 70%;
}
img {
height: 500px;
width: 1950px;
}
#aboutcontainer {
display: flex;
width: 80%;
height: 100%;
gap: 40px;
}
#about {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
width: 100%;
}
#aboutText {
display: flex;
font-size: 20px;
font-weight: 400;
flex-direction: column;
gap: 40px;
width: 100%;
}
#abouttitle {
font-weight: 700;
font-size: 40px;
}
#aboutImage {
display: flex;
justify-content: center;
align-items: center;
height: 90%;
width: 50%;
}
#ebookcontainer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80%;
}
#econtainer {
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 75%;
height: 80%;
background-color: #dd927c;
border-radius: 5px;
}
#ebookimage {
display: flex;
width: 45%;
height: 100%;
justify-content: flex-end;
align-items: center;
justify-content: center;
}
#ebook {
height: 585px;
width: 550px;
}
#etext {
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
height: 100%;
}
#ebookstuff {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: center;
font-family: Dancing Script, 'sans serif';
width: 80%;
height: 50%;
color: white;
font-size: 80px
}
#egraph {
display: flex;
color: white;
padding-inline-start: 60px;
width: 100%;
height: 20%;
font-size: 30px;
}
#ebookdirect {
display: flex;
align-items: center;
justify-content: center;
height: 50%;
width: 100%;
}
#ebutton {
border: none;
color: white;
font-size: 30px;
background-color: rgba(201, 115, 116, 255);
border-radius: 5px;
height: 60px;
width: 400px;
}
#ebutton:hover {
cursor: pointer;
}
#subscribelist {
padding: 0px;
list-style: none;
}
#subscribelistelm {
display: flex;
padding: 10px;
}
#footer {
display: flex;
flex-direction: column;
width: 100%;
height: 80%;
}
#text {
display: flex;
gap: 10px;
flex-direction: column;
width: 100%;
height: 20%;
}
#postcontainer {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
#post1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
height: 100%;
width: 30%;
}
#postimg {
height: 300px;
width: 300px;
}
#postbutton1 {
border: none;
color: white;
font-size: 20px;
background-color: #de8e7a;
width: 30%;
height: 5%;
}
#post1title {
font-size: 30px;
font-weight: bold;
}
#post1preview {}
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Mukta:wght#200;300;400;500;600&display=swap" rel="stylesheet">
<section id="header">
<div id="name">CAVETTA JOHNSON</div>
<div id="quote">Living life with intention. Live don't just exist.</div>
</section>
<nav id="navbar">
<ul id="navlist">
<li id="navlistelm">Home</li>
<li id="navlistelm">Travel Blog</li>
<li id="navlistelm">ebook</li>
<li id="navlistelm">Merchandise</li>
<li id="navlistelm">1 On 1 Session</li>
<li id="navlistelm">About Us</li>
</ul>
</nav>
<div id="navimgcontainer">
<img src="./images/CAVETTA JOHNSON.png" alt="">
</div>
<section id="about">
<div id="aboutcontainer">
<div id="aboutText">
<div id="abouttitle">I finally decided to start living!</div>
Hey hey hey! My name is Cavetta, and welcome to Life With Vetta. I am a mom to 2 amazing boys. Kal-El 16 And Jor-El 11. I have been divorced and a single mom for a few years now. Juggling raising the men of tomorrow, working, having a life outside of
my boys (nonexistent). We LOVE to travel. I originally moved from Jamaica to California for college. The travel bug had bitten me and the need to see the world and what it has to offer has always been with me. I went on a few cruises before kids,
traveled to different states and cities, exploring and wandering. When I found myself with 2 kids, alone I knew one of my first goals was to show them the world and let them see things outside of their comfort zone. We took our first cruise when
they were itsy bitsy and had a blast. Since then, we traveled the states, city hopping and seeing their home country. We then trotted over to London and Paris when they were older and that struck a chord and lit a fire that was not going to be tamed
by anything but travel and adventure. I had been thinking and considering being a digital nomad.
</div>
<div id="aboutImage">
<img src="./images/IMG_3238.jpg" alt="">
</div>
</div>
</section>
<section id="ebookcontainer">
<div id="econtainer">
<div id="etext">
<div id="ebookstuff">So you want to travel the world
</div>
<div id="egraph">I do not have millions in the bank but I am making it happen without stress or worry.</div>
<div id="ebookdirect">
<button id="ebutton">Download!</button>
</div>
</div>
<div id="ebookimage">
<img src="./images/Digital Download! (1).png" alt="" id="ebook">
</div>
</div>
</section>
<section id="postcontainer">
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOO</div>
<div id="post1preview">sssssssssss</div>
<button id="postbutton1">Read More!</button>
</div>
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOO</div>
<div id="post1preview">sssssss</div>
<button id="postbutton1">Read More!</button>
</div>
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOOdddddddddddddddddddddddddddddddddddddddddddddddd</div>
<div id="post1preview">ssssssddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddds</div>
<button id="postbutton1">Read More!</button>
</div>
</section>
<section id="footer">
<div id="Text">
<div id="title">Subscribe To Follow Our Adventures</div>
<div id="signup">Get the latest updates on where we are and what fabulous experiences we are having!</div>
</div>
<div id="Subscribe">
<form action="api" id="subscribeform">
<ul id="subscribelist">
<li id="subscribelistelm">
<input type="firstname" id="firstname" name="user_firstname" />
</li>
<li id="subscribelistelm">
<input type="lastname" id="lastname" name="user_lastname" />
</li>
<li id="subscribelistelm">
<input type="email">
</li>
<li id="subscribebutton">
<button>Yo</button>
</li>
</form>
</div>
</section>
One solution would be to assign width and word-wrap.
For example for the #post1title id:
#post1title {
font-size: 30px;
font-weight: bold;
width:100%;
word-wrap: break-word;
}
in spite of my research on the internet I did not succeed in doing what I wanted to do.
I want to put my text to the left of my text or my text to the right of my image but I can't do it.
Here is the code :
HTML :
<div class="surfooter">
<div class="flex-container">
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
<div class="flex-item">
<img src="img/Adidas.png" alt="Adidas" class="img-responsive" />
<p>Adidas.com</p>
</div>
</div>
</div>
CSS :
.surfooter{
padding-bottom: 50px;
padding-top: 50px;
background-color: #466964;
color: white;
font-size: 16px;
position: relative;
}
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height: 200px;
position: relative;
}
.flex-item {
margin: auto;
width: auto;
height: auto;
}
.flex-item p{
color: white;
font-size: 1.41em;
font-weight: bold;
line-height: 1.3em;
width: 80%;
margin: 0 auto;
}
.flex-item img{
object-fit: cover;
border-radius: 100%;
width: 150px;
height: 150px;
}
Thank you for reading
Since you're trying to change your text's, you have to change your flex-item div, which is:
In your Css script, put this:
.flex-item{
display:flex;}
Set display:flex; on your flex-item div.
HTML:
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
CSS:
.flex-item{
display:flex;
}
Change your .flex-item class to this hope this solves your problem.
.flex-item {
display:flex;
flex-direction:row;
}
I tried like this. It works.
<div class="surfooter">
<div class="flex-container">
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
<div class="flex-item">
<img src="img/Adidas.png" alt="Adidas" class="img-responsive" />
<p>Adidas.com</p>
</div>
</div>
</div>
css
.surfooter{
padding-bottom: 50px;
padding-top: 50px;
background-color: #466964;
color: white;
font-size: 16px;
position: relative;
}
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height: 200px;
position: relative;
}
.flex-item {
margin: auto;
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item p{
color: white;
font-size: 1.41em;
font-weight: bold;
line-height: 1.3em;
width: 80%;
margin: 0 auto;
}
.flex-item img{
object-fit: cover;
border-radius: 100%;
}
I am currently working on my webpage's responsiveness and have implemented flexbox for the positioning of my page's elements. The issue that I am experiencing is that when I use 'flex-direction: column' in my media query, the divs disappear upon the browser being resized. What am I doing wrong here?
#blue {
background-color: #57afb5;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#dark-green {
background-color: #29914c;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#green {
background-color: #91e3ad;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#orange {
background-color: #c98a32;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#top {
display: flex;
justify-content: space-around;
margin-top: 2%;
}
#bottom {
display: flex;
justify-content: space-around;
margin-top: 2%;
}
/* responsive web design*/
#media only screen and (max-width: 960px) {
#top {
display: flex;
flex-direction: column;
}
#bottom {
display: flex;
flex-direction: column;
}
/*end of responsive web design*/
<div class='main-content'>
<div id='Navbar_Link-Toggle' style='font-size: 20px'>
<i id='main' class='fas fa-bars'></i>
</div>
<div class='container'>
<div class='Navbar'>
<a class='links' href=''>FOOD</a>
<a class='links' href=''>FUN</a>
<img id='center-logo' src='img/SAMO.png'>
<a class='links' href=''>HISTORY</a>
<a class='links' href=''>LOCATION</a>
</div>
</div>
<div class='header'>
<img id='food' src='img/food.jpg'>
</div>
</div>
<div id='top'>
<div id='blue'></div>
<div id='dark-green'></div>
</div>
<div id='bottom'>
<div id='green'></div>
<div id='orange'></div>
</div>
</div>
The #top and #bottom divs have no height. You could give them a hight. I.E #top, #bottom { hight: 700px; }
Alternatively, use display: block; as illustrated in the example below.
Side note: When I have missing elements, I'll sometimes throw a border: solid red 2px; on them to better visualize what is happening. Hope that helps for next time!
#blue {
background-color: #57afb5;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#dark-green {
background-color: #29914c;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#green {
background-color: #91e3ad;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#orange {
background-color: #c98a32;
max-width: 470px;
height: 350px;
flex: 1;
justify-content: space-around;
}
#top {
display: flex;
justify-content: space-around;
margin-top: 2%;
}
#bottom {
display: flex;
justify-content: space-around;
margin-top: 2%;
}
/* responsive web design*/
#media only screen and (max-width: 960px) {
#top,
#bottom {
display: block;
}
}
/*end of responsive web design*/
<div class='main-content'>
<div id='Navbar_Link-Toggle' style='font-size: 20px'>
<i id='main' class='fas fa-bars'></i>
</div>
<div class='container'>
<div class='Navbar'>
<a class='links' href=''>FOOD</a>
<a class='links' href=''>FUN</a>
<img id='center-logo' src='img/SAMO.png'>
<a class='links' href=''>HISTORY</a>
<a class='links' href=''>LOCATION</a>
</div>
</div>
<div class='header'>
<img id='food' src='img/food.jpg'>
</div>
</div>
<div id='top'>
<div id='blue'></div>
<div id='dark-green'></div>
</div>
<div id='bottom'>
<div id='green'></div>
<div id='orange'></div>
</div>
I want to create a layer from windows 10 calculator and i have some problem in height and width in it.
Any help would be appreciated.
Problems:
when i pull up the top of the result or increase the height of the browseer the calculator go up and a large space appear in the bottom of the calculator and i don't know why is that.
when i decrease the width of the window instead of decrease the width of buttons calculator go right and some buttons won't display.
when i decrease the height of window it won't stop any where but i want to stop it in 500 px height;
This is my code.
html:
<!DOCTYPE html>
<html>
<head>
<link href="./calculator.css" rel="stylesheet" type="text/css">
<title>Windows10 Calculator</title>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<div class="container">
<div class="calculator-container">
<div class="top-navbar">
<p id="calculator">
Calculator
</p>
<div class="close-bar">
<a id="minimize">-</a>
<a id="maximize">🗆</a>
<a id="close">x</a>
</div>
</div>
<div class="calculator-screen">
<div class="top-screen">
<a id="calculator-menu">≡</a>
<p id="standard">
Standard
</p>
</div>
<div class="result"><span id="result">4</span></div>
<div class="m-row">
<a id="MC">MC</a>
<a id="MR">MR</a>
<a id="Mplus">M+</a>
<a id="Mminus">M-</a>
<a id="MS">MS</a>
</div>
</div>
<hr />
<div class="functions">
<div class="row">
<a class="hide-in-big blue">%</a>
<a class="hide-in-big blue">√</a>
<a class="lucida-font hide-in-big blue"><p>
x<sup>2</sup>
</p></a>
<a class="lucida-font hide-in-big blue"><p><sup>1</sup>∕<sub>x</sub></p></a>
</div>
<div class="row">
<a class="show-in-big blue">%</a>
<a class="cs blue">CE</a>
<a class="cs blue">C</a>
<a class="blue"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABDklEQVRYR+2W4Q3CIBSErxu4iY6gm+hmbqIj6CZuUHNJMeQFeAelaUzoT8LjPo570Ak7f9PO+hgAw4G/cuAA4AHg1KFzfhtXHegpTv4qgFj8DeAM4NPowrzUyQA9xaldBaCIc451IzUWDJMBFPE7gCOASwQR6l4AboljkgAUcc55LgAUIwS/0CW5rLgAinjYmIXgOFu0FNQiQI14CoJjXpe4ANZWr93s/RCOI1cnHYEKYR2jAwxlCcIF4CKpgKVazQaOtR68BKBCsA0ZuvhmDPB04drahrmUx/0ez9nkIqqBqHkW5COIF1UyoUI0AdhMqGKlefJrmHNiLUQTwFrRZL36R7SJOBcdAMOB3R34AqM1YCEu+sgCAAAAAElFTkSuQmCC" /></a>
<a class="hover-blue blue">\[\div\]</a>
</div>
</div>
<div class="numpad">
<div class="row">
<a class="lucida-font show-in-big blue">√</a>
<a class="number">7</a>
<a class="number">8</a>
<a class="number">9</a>
<a class="hover-blue blue">×</a>
</div>
<div class="row">
<a class="lucida-font show-in-big blue"><p>
x<sup>2</sup>
</p>
<a class="number">4</a>
<a class="number">5</a>
<a class="number">6</a>
<a class="hover-blue blue">-</a>
</div>
<div class="row">
<a class="lucida-font show-in-big blue"><p>
x<sup>3</sup>
</p></a>
<a class="number">1</a>
<a class="number">2</a>
<a class="number">3</a>
<a class="hover-blue blue">+</a>
</div>
<div class="row">
<a class="lucida-font show-in-big blue"><p><sup>1</sup>∕<sub>x</sub></p></a>
<a class="blue">±</a>
<a class="number">0</a>
<a class="blue">∙</a>
<a class="hover-blue blue">=</a>
</div>
</div>
</div>
<div class="history-memory">
<div>
<div class="hidden-close-bar">
<a id="minimize">ー</a>
<a id="maximize">🗆</a>
<a id="close">྾</a>
</div>
<div class="history-memory-bar">
<a id="history">History</a>
<a id="memory">Memory</a>
</div>
</div>
<div class="history-memory-screen">
<span class="grey"> 2×2=</span>
<span class="black">4</span>
<span class="grey">9999+1=</span>
<span class="black">10000</span>
</div>
</div>
</div>
</body>
CSS:
#font-face{
src:
url("//db.onlinewebfonts.com/t/efbd8f0d869bf61fbe0f139a1602cda8.woff2");
font-family:"lucida calligraphy";
}
body{
min-width: 500px;
width: auto !important;
margin: 0 !important;
overflow: hidden;
font-family: Segoe UI;
}
.close-bar, .hidden-close-bar{
margin-right: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.container{
min-width: 800px;
min-height: 800px;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
overflow-y: hidden;
background-color: #E6E6E6;
}
.calculator-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between !important;
}
.top-navbar{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.top-navbar p {
margin-left: 10px;
}
.top-screen a{
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.top-screen p{
display: flex;
align-items: center;
justify-content: center;
}
.calculator-screen{
display: flex;
flex-direction: column;
}
.top-screen{
display: flex;
flex-direction: row;
}
.top-screen * {
margin: 1%;
font-size: 2em;
}
.result{
height: 15vh;
display: flex;
justify-content: flex-end;
font-size: 4em;
font-family: Segoe UI;
font-weight: bold;
}
.row{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: bottom
}
.cs{
font-size: 1.5em !important;
}
.m-row{
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.m-row a{
margin-left: 7%;
cursor: pointer;
}
#standard{
font-size: 1.5em;
margin-left: 3%;
}
.row a {
width: 25%;
height: 10%;
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
margin: 1px;
cursor: pointer;
font-size: 2em;
}
.row a:hover{
background-color: #B1B2B5;
}
.blue{
background-color: #F0F0F0;
font-weight: 300;
}
.number{
background-color: #FAFAFA;
font-weight: bold;
font-size: 1.5em !important;
}
.history-memory{
display: none;
}
.history-memory a {
cursor: pointer;
font-size: 1.5em;
}
.row .hide-in-big{
display: flex;
justify-content: center;
align-items: center;
}
.row .show-in-big{
display: none;
}
.hidden-close-bar{
display: none;
}
.close-bar {
margin: 1px;
}
#history {
border-bottom: 2px solid #0097A7;
margin-right: 10%;
}
#trash-can {
display: flex;
justify-content: flex-end;
align-items: center;
margin: 10px;
background-color: #aad3ef;
cursor: default;
}
#trash-can img {
width: 15%;
cursor: pointer;
background-color: #aad3ef;
}
.history-memory-screen{
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 10%;
height: 100%;
}
.history-memory-bar{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.grey{
align-self: flex-end;
color: #616161;
margin: 5px;
margin-right: 5px;
}
.black{
align-self: flex-end;
justify-self: flex-end;
margin: 5px;
margin-right: 5px;
}
.lucida-font{
font-family:"lucida calligraphy" !important;
font-size: 1em !important;
font-weight: bold !important;
}
.hover-blue:hover{
background-color: #1C87DB !important;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#media screen and (max-width: 800px){
.calculator-container{
width: 100%;
height: 100%
}
.row .show-in-big{
display: none;
}
.row .hide-in-big {
display: flex;
justify-content: center;
align-items: center;
}
}
#media screen and (min-width:800px){
.history-memory{
display: flex;
width: 40%;
flex-direction: column;
justify-content: space-between;
}
.hidden-close-bar{
display: block;
text-align: right;
}
.hidden-close-bar a{
margin: 1px;
}
.close-bar {
display: none;
}
}
#media screen and (min-width: 1000px){
.row .hide-in-big{
display: none;
}
.row .show-in-big {
display: flex;
justify-content: center;
align-items: center;
}
}
and this is the link to jsfiddle of my code
problem number 1: since you use min-height, you should define the height of your paren. In your case it is body so this will solve the 1st problem:
body{
/* other stuff */
height: 100vh; /* or whatever px, em, etc., except % */
}
problem number 2: As I understand, the problem appears with the 'M' buttons, since all others seem to be resized correctly... so if you add max-width to the .m-row a it would prevent overflow. You also could add the font-size in vw as you did for the other buttons, though I wouldn't do this because all the texts become unreadable in a small window.
.m-row a{
margin-left: 7%;
max-width: 13%; /* because you have 5 buttons (each 20%) - 7% of your margin-left*/
}
problem number 3: You could open a new window with specified dimensions with some javascript and control it's size with window.resizeTo. However I think some browsers won't allow this.. So instead I would simply add min-width, min-height add overflow: auto to the parent (in your case the body).
I hope it helps.
Im kind of lost here.
I want my .div .sticker to be at the bottom of .div stick-to-me on hover
I have tried couple of approaches but never with the preferred results.
The main problem is that when the stick-to-me div gets hovered it somehow pushes the .sticker div down and only partially hides it.
You can see in this fiddle how my code is and how it looks for now. It is obvius that I'm not getting the wanted results.
Any help or advise would be great.
here is my html
.flex-row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-row:after,
.flex-row:before {
display: none;
}
#media (max-width: 767px) {
.flex-row {
display: block;
}
}
/* partners */
.mag-block {
padding: 7px 0 120px;
}
#media (max-width: 991px) {
.mag-block {
padding-bottom: 60px;
}
}
#media (max-width: 767px) {
.mag-block {
padding-bottom: 40px;
}
}
.mag-block .row {
margin-left: -8px;
margin-right: -8px;
}
.mag-block .row [class^="col-"] {
padding-left: 8px;
padding-right: 8px;
}
#media (max-width: 991px) {
.mag-block .row [class^="col-"] {
padding-bottom: 16px;
}
}
.mag-block .item {
background-color: #fff;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
border: 1px solid #d5d2d2;
text-decoration: none !important;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
height: 137px;
text-align: center;
color: inherit;
}
.mag-block .item figcaption {
font-size: 16px;
line-height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 2px 10px 8px;
}
#media (max-width: 1219px) {
.mag-block .item figcaption {
font-size: 14px;
}
}
#media (max-width: 991px) {
.mag-block .item figcaption {
font-size: 16px;
}
}
#media (max-width: 767px) {
.mag-block .item figcaption {
font-size: 14px;
}
}
.mag-block .item .logo {
height: 50px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
.mag-block .item .logo img {
display: inline-block;
vertical-align: top;
max-height: 100%;
max-width: 100%;
}
.mag-block .item .logo .text {
display: block;
font-size: 30px;
line-height: 34px;
font-weight: 500;
padding: 14px 0 0;
}
.mag-block .item .more-link {
width: 142px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
line-height: 20px;
font-weight: 500;
height: 0;
overflow: hidden;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
margin-top: -5px;
}
.mag-block .item .more-link span {
display: block;
padding: 7px 0 3px;
border-top: 2px solid lightgray;
}
.mag-block .item .more-link span:before {
content: '+ ';
color: #c2002d;
display: inline-block;
vertical-align: top;
margin-left: -20px;
padding-right: 4px;
}
.mag-block .item:hover {
margin: -11px -8px;
height: 200px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.mag-block .item:hover .more-link {
height: 50px;
}
.stick-to-me {
position: relative;
padding-bottom: 50px;
z-index: 500;
}
.sticker {
position: absolute;
bottom: 0;
height: 50px;
z-index: -500;
background-color: #eee;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="mag-block">
<div class="row flex-row">
<div class="col-md-3 col-sm-6 stick-to-me">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner 1</strong>
</div>
<figcaption>small text about Partner 1 </figcaption>
</figure>
<footer class="more-link">
<span>Open</span>
</footer>
</a>
<div class="sticker">
<p> Sticker </p>
</div>
</div>
<!-- stick to me ends -->
<div class="col-md-3 col-sm-6 stick-to-me">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner 2</strong>
</div>
<figcaption> tagline Partner 2</figcaption>
</figure>
<footer class="more-link">
<span>Open</span>
</footer>
</a>
<div class="sticker">
<p> Sticker </p>
</div>
</div>
<!-- stick to me ends -->
<div class="col-md-3 col-sm-6 stick-to-me">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner 3</strong>
</div>
<figcaption>tagline Partner 3</figcaption>
</figure>
<footer class="more-link">
<span>Open</span>
</footer>
</a>
<div class="sticker">
<p> Sticker </p>
</div>
</div>
<!-- stick to me ends -->
<div class="col-md-3 col-sm-6 stick-to-me">
<a href="#" class="item">
<figure>
<div class="logo">
<strong class="text">Partner 4</strong>
</div>
<figcaption>tagline Partner 4</figcaption>
</figure>
<footer class="more-link">
<span>Open</span>
</footer>
</a>
<div class="sticker">
<p> Sticker </p>
</div>
</div>
<!-- stick to me ends -->
</div>
</div>
<!-- mag-block -->
I looked briefly at your code, my suggestion is just to add this lin in your css. I edited in your fiddle and it works. I believe it is close to what you need.
I can add more detail to this answer after work if you need.
.stick-to-me:hover{
padding-bottom: 0px;
}
You should try this
.stick-to-me { padding-bottom:0px; min-height:137px; }
.stick-to-me .item { width:100%; height:100%; min-height:137px; position:absolute; top:0px; left:0px; }
.sticker { bottom:-50px; }
It will work for you.