Okay, so I've been practicing yesterday and after a few hours I checked this in Chrome (was working with firefox). How should i fix that?
I don't know where does it take the ridiculous height from.
Here's the preview i get (left is firefox, right is chrome)
Styling:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #f0ca4d;
display: flex;
justify-content: center;
font-family: "Roboto";
color: white;
}
.popup {
margin-top: 100px;
width: 400px;
/* height: 300px;*/
background-color: #fff;
-webkit-box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
-moz-box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
position: relative;
}
.top {
width: 100%;
height: 70px;
background-color: #324d5c;
display: flex;
justify-content: flex-start;;
flex-direction: row;
}
.top span {
margin: 32px 16px 16px 16px;
font-size: 24px;
font-weight: 300;
}
.content {
color: rgba(0,0,0,0.5);
margin: 32px 32px 0px 32px;
line-height: 150%;
}
.fab {
width: 48px;
height: 48px;
background-color: #de5b49;
border-radius: 50%;
margin-left: auto;
margin-right: 16px;
position: absolute;
right: 0px;
top: 46px;
text-align: center;
}
.fab:hover span {
cursor: pointer;
}
.fab span {
font-size: 30px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
font-weight: 300;
line-height: 48px;
display: inline-block;
}
.bot span {
text-transform: uppercase;
color: #324d5c;
font-weight: 500;
padding: 16px 32px 16px 32px;
transition: background-color 0.45s cubic-bezier(0,1,.83,.67) 0.08s;
background-color: white;
}
.bot span:hover {
background-color: #f8f8f8;
cursor: pointer;
}
.bot {
width: 100%;
display: flex;
justify-content: flex-end;
}
#disabled {
color: #d1d1d1;
margin-right: auto;
}
#disabled:hover {
background-color: white !important;
cursor: default;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
Sctructure:
<div class="popup">
<div class="top">
<span>Warning box</span>
</div>
<div class="fab">
<span>+</span>
</div>
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> -->
</div>
<div class="bot">
<span id="disabled">disabled</span>
<span>ENABLED</span>
</div>
</div>
Can't get this to work.
This is what I have in chrome..
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title> Stack Overflow issues</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #f0ca4d;
display: flex;
justify-content: center;
font-family: "Roboto";
color: white;
}
.popup {
margin-top: 100px;
width: 400px;
/* height: 300px;*/
background-color: #fff;
-webkit-box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2);
-moz-box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2);
box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.2);
position: relative;
}
.top {
width: 100%;
height: 70px;
background-color: #324d5c;
display: flex;
justify-content: flex-start;
;
flex-direction: row;
}
.top span {
margin: 32px 16px 16px 16px;
font-size: 24px;
font-weight: 300;
}
.content {
color: rgba(0, 0, 0, 0.5);
margin: 32px 32px 0px 32px;
line-height: 150%;
}
.fab {
width: 48px;
height: 48px;
background-color: #de5b49;
border-radius: 50%;
margin-left: auto;
margin-right: 16px;
position: absolute;
right: 0px;
top: 46px;
text-align: center;
}
.fab:hover span {
cursor: pointer;
}
.fab span {
font-size: 30px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
font-weight: 300;
line-height: 48px;
display: inline-block;
}
.bot span {
text-transform: uppercase;
color: #324d5c;
font-weight: 500;
padding: 16px 32px 16px 32px;
transition: background-color 0.45s cubic-bezier(0, 1, .83, .67) 0.08s;
background-color: white;
}
.bot span:hover {
background-color: #f8f8f8;
cursor: pointer;
}
.bot {
width: 100%;
display: flex;
justify-content: flex-end;
}
#disabled {
color: #d1d1d1;
margin-right: auto;
}
#disabled:hover {
background-color: white !important;
cursor: default;
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Likely future */
}
</style>
</head>
<body>
<div class="popup">
<div class="top">
<span>Warning box</span>
</div>
<div class="fab">
<span>+</span>
</div>
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> -->
</div>
<div class="bot">
<span id="disabled">disabled</span>
<span>ENABLED</span>
</div>
</div>
</body>
</html>
Related
I am making a filter button with a hidden panel. I have button as default. On clicking of button, a panel will show below button but in this view, i need a single border line which makes button as part of that and nor border where button is touching the below panel.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 20%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active {
background-color: white;
border: 1px solid;
border-top-color: lightgrey;
border-left-color: lightgrey;
border-right-color: lightgrey;
border-bottom-color: white;
}
.panel {
border: 1px solid;
border-bottom-color: lightgrey;
border-left-color: lightgrey;
border-right-color: lightgrey;
border-top-color: lightgrey;
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
There's a few ways to do what you're asking but you can use a negative bottom margin to pull the button down by 1px so its white border overlaps the top border on the panel:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 20%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-bottom: -1px; /* add this rule */
}
.active {
background-color: white;
border: 1px solid;
border-top-color: lightgrey;
border-left-color: lightgrey;
border-right-color: lightgrey;
border-bottom-color: white;
}
.panel {
border: 1px solid;
border-bottom-color: lightgrey;
border-left-color: lightgrey;
border-right-color: lightgrey;
border-top-color: lightgrey;
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
I am learning how to create responsive websites for a desktop, tablet, and mobile using CSS3 media queries. I created a fictional site to practice but I am having trouble with the menu-icon and the horizontal menu. In the desktop view, the menu is supposed to be horizontal and float to the right but instead, it's vertical. When I shrink the screen to the mobile dimensions the menu-icon shows up and the horizontal menu. I want the menu-icon to show on the mobile-view but it's not dropping the menu down. Can someone please tell me what I am doing wrong? Thank you.
I have tried reversing the menu code in the media queries and my regular CSS code but the menus are still not working properly. I also for the display for the menu code I put none but all that did was have the all the menus disappear altogether. I have looked at numerous tutorials, but none of them helped me.
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8">
<title>Abstract Alibi Agency</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="container">
<header>
<h1>Abstract Alibi Agency</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="hero">
<div class="container">
<h2>We'll catch them in the act.</h2>
</div>
</section>
<section class="main">
<aside>
<h3>Background Checks</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</p>
</aside>
</section>
<section>
<aside>
<h3>Investigate Infidilty</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</p>
</aside>
</section>
<section>
<aside>
<h3>Security</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</p>
</aside>
</section>
<footer>© Abstract Alibi Agency 2018 - All Rights Reserved.</footer>
</div>
</body>
</html>
CSS:
body {
font-family: 'Times New Roman', sans-serif;
font-size: 1em;
color: #000;
margin: 0;
padding: 0;
background-color: #999;
}
#container {
width: 100%;
margin: 0 auto;
position: absolute;
}
header {
padding: 5px;
background: #000;
width: 100%;
height: 76px;
position: fixed;
}
h1 {
margin-left: 10px;
color: #00F;
font-size: 1.5rem;
display: inline-block;
}
h3 {
color: #00F;
text-align: center;
}
nav {
float: right;
padding: 5px;
font-family: 'Georgia', sans-serif;
}
#menu-icon {
background: url(../img/menu-icon.png);
display: hidden;
width: 50px;
height: 42px;
float: right;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
.hero {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
background: url(../img/couple.jpg) no-repeat;
background-size: cover;
background-position: center;
border-bottom: #000 2px solid;
z-index: -1;
}
.hero h2 {
width: 100%;
padding: 80px;
color: #FFF;
text-align: center;
}
section .main aside {
max-width: 425px;
text-align: left;
}
aside {
width: 100%;
float: none;
}
p {
margin: 35px;
}
footer {
width: 100%;
margin-top: 0;
padding: 15px;
background-color: #000;
color: #999;
text-align: center;
}
#media (min-width: 640px) { /* targets screens 640px and up */
h3 {
margin: 30px;
color: #00F;
text-align: left;
}
header {
position: relative;
}
nav {
float: right;
padding: 5px;
font-family: 'Georgia', sans-serif;
}
#menu-icon {
display: none;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
nav ul, nav:active ul {
display: hidden;
position: absolute;
padding: 15px;
background: #000;
right: 5px;
top: 65px;
width: 10%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 15px 0;
margin: 0;
}
section .main aside {
text-align: left;
}
aside {
width: 33.3%;
float: left;
}
footer {
margin-top: 0;
padding: 15px;
background-color: #000;
color: #999;
text-align: center;
clear: both;
}
}
I want only the mobile version to show the menu-icon and have it drop down when clicked on and the tablet and desktop version to show the horizontal menu.
set nav ul width 25% and remove nav li width and add last line current width #media (max-width: 640px) { nav ul{ width:10%; } nav li{ width:100%} } like this
#media (min-width: 640px) {
nav ul, nav:active ul {
display: hidden;
position: absolute;
padding: 15px;
background: #000;
right: 5px;
top: 65px;
width: 25%;/* set to little more because Items can fit in horizontal */
}
nav li {
text-align: center;
/*width: 100%; remove li width than its should set auto 100% means 100% of parent(ul) and this makes a row(in block view)*/
padding: 15px 15px;/*some padding for visibility*/
margin: 0;
}
}
#media (min-width: 640px) {
nav ul, nav:active ul {
display: hidden;
position: absolute;
padding: 15px;
background: #000;
right: 5px;
top: 65px;
width: 10%;/*back to the you first width*/
}
nav li {
text-align: center;
width: 100%;/*open width for row to row view*/
padding: 15px 0px;/*remove padding to normal*/
margin: 0;
}
}
mobile version to show the menu-icon and have it drop down when
clicked
Width some jquery
$('.menu-icon').click(function () {
$("nav").toggleClass("nav-hidden-mobile");
});
and in your html <nav> to <nav class="nav-hidden-mobile">
and class css #media (max-width: 640px) { .nav-hidden-mobile{ display:none; } }
should be work, not tried this but upper css tried (before write first comment), its working
Good day,
I'm not new to CSS or DIVs but have been out of touch for long enough. Trying to work out with Containers and nested DIVs but not getting much success in doing what I'm trying to do. Have already searched enough on SO and Goog but, hopefully you can help me.
Here's the representation of what I wish to achieve.
Screenshot of the layout
And here is what I have done so far ..
.dealsglobal {
width: 45%;
display: inline-block;
float: left;
margin-right:20px;
height: auto;
overflow: auto;
}
.dealsglobal h2 {
margin-left: 10px;
}
.dealsindia {
width: 45%;
height: auto;
overflow: auto;
}
.dealsindia h2 {
margin-left: 10px;
}
.dealsleft {
margin: 0px 25px 10px 0px;
padding: 5px;
border: 1px solid #ccc;
height: auto;
position: relative;
width: 40%;
float: left;
display: inline-block;
overflow: auto;
}
.dealsleft img {
border: 1px solid #ddd;
background: #fff;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 100px;
}
.dealsright {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
height: auto;
position: relative;
width: 40%;
display: inline-block;
overflow: auto;
}
<div class="dealsglobal">
<h2>Global Coupons</h2>
<div class="dealsleft">
<img src="thumb-heavengifts.jpg" alt="HeavenGifts.com Web Store" align="middle" />
</div>
<div class="dealsright">
Test
</div>
</div>
<div class="dealsindia">
<h2>Indian Coupons</h2>
<div class="dealsleft">
Test
</div>
<div class="dealsright">
Test
</div>
</div>
The image just wont center, no matter what I do. I believe, somewhere I have set the property to align left or something. Can anyone please point me to the correct direction? Thanks for your help!
I changed your code a little bit, but you'll get idea :
Here is html :
<div class="container">
<div class="left">
<h2 class="inner-text">title</h2>
<div class="image">
<img src="http://via.placeholder.com/350x150" />
</div>
<h5 class="inner-text">description</h5>
</div>
<div class="right">
<h2 class="inner-text">title</h2>
<div class="image">
<img src="http://via.placeholder.com/350x150" />
</div>
<h5 class="inner-text">description</h5>
</div>
<div style="clear: both" />
</div>
And here is the css:
.container{
width: 98%;
border: 2px solid #f00;
padding: 10px;
}
.left {
width: 47%;
float: left;
margin: 0 1% 0 1%;
border: 1px solid green;
}
.right {
width: 47%;
float: left;
margin: 0 1% 0 1%;
border: 1px solid green;
}
.inner-text{
text-align:center;
}
.image{
padding: 20px;
}
.image img{
max-width: 100%;
}
Check here jsfiddle.
You missed adding this css property:
.dealsleft {
text-align:center;
}
You can center elements inside a div by using text-align:center; for all the text elements like: h1, p, h2, a etc. To center an img or a div inside another div you can use margin: 0 auto; the auto is the important part for centering the left and right margins.
More info here
i've updated your code snippet.
.dealsglobal {
width: 45%;
display: inline-block;
float: left;
margin-right:20px;
height: auto;
overflow: auto;
}
.dealsglobal h2 {
margin-left: 10px;
}
.dealsindia {
width: 45%;
height: auto;
overflow: auto;
}
.dealsindia h2 {
margin-left: 10px;
}
.dealsleft {
margin: 0px 25px 10px 0px;
padding: 5px;
border: 1px solid #ccc;
height: auto;
position: relative;
width: 40%;
float: left;
display: inline-block;
overflow: auto;
text-align: center;
}
.dealsleft img {
border: 1px solid #ddd;
background: #fff;
border-radius: 4px;
margin: 5px auto;
width: 100px;
}
.dealsright {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
height: auto;
position: relative;
width: 40%;
display: inline-block;
overflow: auto;
text-align: center;
}
<div class="dealsglobal">
<h2>Global Coupons</h2>
<div class="dealsleft">
<img src="thumb-heavengifts.jpg" alt="HeavenGifts.com Web Store" align="middle" />
</div>
<div class="dealsright">
Test
</div>
</div>
<div class="dealsindia">
<h2>Indian Coupons</h2>
<div class="dealsleft">
Test
</div>
<div class="dealsright">
Test
</div>
</div>
I have added background colors for visualization purposes.
* {
box-sizing: border-box;
}
#container {
width: 100%;
padding: 10px;
background-color: red;
display: flex;
justify-content: space-between;
}
.subcontainer-outer {
width: 49%;
background-color: green;
}
.subcontainer {
width: 100%;
background-color: blue;
display: flex;
justify-content: space-between;
}
.content {
width: 45%;
text-align: center;
background-color: yellow;
}
<h3>Container</h3>
<div id="container">
<div class="subcontainer-outer">
<h4>Sub container 1</h4>
<div class="subcontainer">
<div class="content">
<img src="http://placehold.it/100" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="content">
<img src="http://placehold.it/100" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="subcontainer-outer">
<h4>Sub container 2</h4>
<div class="subcontainer">
<div class="content">
<img src="http://placehold.it/100" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="content">
<img src="http://placehold.it/100" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
You can get it by using flex below an example as your requirement.
.dealsglobal {
width: 48%;
margin-right: 10px;
height: auto;
float: left;
}
.flex {
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: row nowrap;
border: 1px solid red;
padding: 10px;
}
.dealsglobal h2 {
margin-left: 10px;
}
.dealsindia h2 {
margin-left: 10px;
}
.dealsleft {
margin: 0px 25px 10px 0px;
padding: 5px;
border: 1px solid #ccc;
flex: 1 0 0;
align-self: flex-start;
}
.dealsleft img {
border: 1px solid #ddd;
background: #fff;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.dealsright {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
overflow: auto;
flex: 1 0 0;
align-self: flex-start;
}
<div class="dealsglobal">
<h2>Global Coupons</h2>
<div class="flex">
<div class="dealsleft">
<img src="http://lorempixel.com/400/200/sports/" alt="HeavenGifts.com Web Store" align="middle" />
</div>
<div class="dealsright">
Test
</div>
</div>
</div>
<div class="dealsglobal">
<h2>Global Coupons</h2>
<div class="flex">
<div class="dealsleft">
<img src="http://lorempixel.com/400/200/sports/" alt="HeavenGifts.com Web Store" align="middle" />
</div>
<div class="dealsright">
Test
</div>
</div>
</div>
Here is working fiddle
fiddle
You are probably looking for any of these 2:
parentSelector {
display: block; /* can also be an inline-block, with set width */
text-align: center;
}
childSelector {
width: 60%; /* generic. Change it */
display: block;
margin: 0 auto;
}
... or:
parentSelector {
display: flex;
flex-direction: column;
align-items: center;
}
childSelector {
max-width: 60%; /* optional. Change it.
* You don't need to set width here and,
* it's OK not to limit max-width, either
*/
}
I'm having trouble understanding why my images don't shrink when I shrink/resize my Chrome. Can someone explain and help me?
I have been trying for a while now but I can't seem to figure it out or find the answer elsewhere. The image shrinks in firefox running on my localhost, but not inside jsfiddle. Still not working in Chrome(57.0.2987.110).
<div class="page">
<div class="container">
<div class="title">
<H1>FLEXBOX PRACTICE</H1>
</div>
<div class="content">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="images">
<img src="http://www.placebacon.net/1280/720" alt="Bacn">
</div>
</div>
</div>
body {
margin: 0;
}
p {
margin: 0;
padding: 0;
}
h1 {
font-size: 72px;
margin: 20px 0;
}
.page {
width: 100vw;
height: 100vh;
background-color: pink;
}
.container {
margin: 0 auto;
width: 80vw;
display: flex;
flex-direction: column;
align-items: center;
}
.content {
display: flex;
justify-content: space-between;
height: 80vh;
width: 60vw;
align-items: center;
background-color: salmon;
}
.text {
flex-grow: 0;
padding: 10px 20px 10px 20px;
background-color: red;
color: white;
border-radius: 10px;
width: 340px;
font-size: 24px;
font-family: verdana;
}
.images {
display: flex;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
max-width: 600px;
width: 600px;
background-color: yellow;
}
.images img {
display: flex;
flex-grow: 1;
flex-shrink: 1;
max-width: inherit;
width: inherit;
}
https://jsfiddle.net/xb4obfce/
You're telling the image to inherit the width of its parent, which is at 600px.
Changing the .images class to width: 100%; should make it responsive.
I am trying to create a custom list using pseudo elements in CSS.
When I add this "position: absolute; top: 6px; left: 0px;", my images for my arrows disappear altogether. When I remove the above line of code, my arrow images appear above the text each list item.
I want my custom arrows to appear next to the next of each list item. How can I fix this?
Here is my code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Web Page</title>
<style type="text/css">
body { font-family: Arial; font-size: 16px; background-color: #f8e6ae; color: #888; }
.page { background-color: #fff; padding: 20px 30px 30px 50px; margin: 100px; }
.page h1 {
color: #fff;
font-size: 1.3em; font-weight: normal;
text-transform: uppercase;
background-color: #d60000;
position: relative;
margin: 0px -70px 20px -50px;
padding: 18px 0px 16px 50px;
}
.page h1:after {
content: '';
display: block; height: 40px; width: 40px;
background: url(images/fold.gif) no-repeat 0 0;
position: absolute; right: 0px; bottom: -40px;
}
.page p { line-height: 1.2em; }
.page a { color: #1badd2; text-decoration: none; }
.page ul { margin: 0; padding:0; }
.page li { display: block; position: relative;
padding: 2px 0px 8px 35px;
}
.page li:before {
content: '';
display: block;
background: url(images/arrow.png) no-repeat 0 0;
height: 12px; width 30px;
position: absolute; top: 6px; left: 0px;
background-size: 20px 8px;
}
</style>
</head>
<body>
<div class="page">
<h1>My Web Page</h1>
<p>Lorem ipsum dolor sit amet consectetur adi pisicing elit sed do eiusmod tempor incid idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citation ull amco laboris nisi ut aliquip ex ea commodo consequat elit sed do.</p>
<ul>
<li>Automating Web Graphics</li>
<li>Slice Tool</li>
<li>Smart Objects</li>
<li>Layer Comps</li>
</ul>
</div>
</body>
</html>
.
I was missing a colon for the width property in the preceding line of code.