I am using a card-based layout from codepen and each card contains an image. On codepen, I am able to resize and adjust the image that appears on the card with no issues. However, when implementing the same exact html code and stylesheet on my browser, the image I am resizing does not respond to any changes made to code contained within "{ img" like it does on codepen. While I was able to adjust the margins of the card wrap to make things appear as I desire, I am wondering what the root of the issue is with my code. Thanks!
<!--DOCTYPE html-->
<html lang="en">
<head>
<html>
<link href="home.css" type="text/css" rel="stylesheet" />
<title>Purple Moss</title>
<!-- inspiration: https://dribbble.com/shots/3784003-Plant-description-page -->
<div class="wrap">
<div class="card">
<div class="card-pic-wrap">
<img src="https://imagizer.imageshack.com/v2/320x240q90/922/MeU4GZ.png" alt="A leafy plant">
</div>
<div class="card-content">
<h3>summary:</h3>
<p>Blossom dorset heath scabious ipsum. Grape hyacinth bee balm bird of paradise obedient plant african lily lily. Spring foxglove florist’s nighmare primrose.</p>
<p>So leafy</p>
</div>
</div>
<div class="card">
<div class="card-pic-wrap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1145795/plant-4.png" alt="Some pointy plants">
</div>
<div class="card-content">
<h3>Some pointy ones</h3>
<p>Florem ipsum sugarbush bloom red rose waxflower coneflower ginger. Saxifrage forget-me-not obedient plant.</p>
<p>I'll take 10</p>
</div>
</div>
</div>
</html>
/* CSS */
$b-r: 5px;
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: #eee;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: "Courier New", Courier, monospace;
}
.wrap {
height: 100%;
}
.card {
display: flex;
flex: 0 0 auto;
background: #fff;
max-width: 700px;
margin: 80px 0;
border-radius: $b-r;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.card-pic-wrap {
border-radius: $b-r 0 0 $b-r;
width: 200px;
flex: 0 0 auto;
position: relative;
background: linear-gradient(to bottom, #f5e4b5, #a19ad9);
img {
position: relative;
bottom: 3em;
left: 50%;
margin-left: -175px;
width: 350px;
-webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(rgba(250, 250, 250, 0.15)));
}
}
.card-content {
padding: 3em 4em 2em;
}
h3 {
font-family: "Courier New", Courier, monospace;
font-weight: bold;
font-size: 2.5em;
margin: 0 0 1em;
}
a {
background: #f5e4b5;
color: #15077d;
padding: 0 25px;
height: 50px;
font-size: 0.8em;
letter-spacing: 1px;
line-height: 50px;
display: inline-block;
border-radius: 25px;
text-decoration: none;
margin-top: 1.5em;
text-transform: uppercase;
border: 1px solid rgba(0,0,0,0.1);
&:hover {
background: #15077d;
color: #f5e4b5;
border: 2px dotted #f5e4b5;
}
}
#media (max-width: 790px) {
body {
overflow-x: hidden;
}
.wrap {
margin-left: 20px;
margin-right: 20px;
}
.card {
flex-direction: column;
margin-top: 50px;
margin-bottom: 50px;
}
.card-pic-wrap {
width: 100%;
border-radius: $b-r $b-r 0 0;
img {
bottom: 20px;
position: relative;
}
}
.card-content {
padding: 2em 2em 1em;
}
}
Never mind, I think I found the issue.
The template code I was using on codepen contained the "img {" within the ".card-pic-wrap {" and did not close off "img {" with closing bracket "}." Rather, it closed off both of these elements with double brackets, which worked fine in codepen but not in browser.
Related
I have a problem with this code I am working on. There's a white space at the bottom of the page at 1024px width and higher that I can't get rid of.
I've tried adding a padding-bottom, checking margins, checking heights, but nothing works. I'm still a beginner so I might've missed something. Any help will be appreciated. Thanks
Screenshot
Screenshot 2
I tried the height: calc(100vh-21px); and this happened
Screenshot 3
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* STYLING */
body{
background: hsl(0, 100%, 98%);
}
/* HEADER */
.logo{
width: 28%;
margin: 1.5em;
}
.hero-mobile{
width: 100%;
}
.hero-desktop{
display: none;
}
.logo-desktop{
display: none;
}
/* MAIN SECTION */
.main{
text-align: center;
font-family: 'Josefin Sans', sans-serif;
color: hsl(0, 36%, 70%);
font-weight: 300;
font-size: 16px;
margin: 2em;
}
h1{
text-transform: uppercase;
font-weight: 300;
font-size: 2.5rem;
margin: 1em auto;
letter-spacing: 12px;
}
.soon{
font-weight: 600;
color: black;
}
.main p{
line-height: 1.5em;
}
/* EMAIL */
.email-form{
text-align: center;
width: 100%;
}
.email{
border-radius: 40px;
border: 1px solid;
color: hsl(0, 36%, 70%);
width: 70%;
height: 50px;
padding: 0px 25px;
}
.email::placeholder{
color: hsl(0, 36%, 70%);
}
.email:focus{
outline: none;
}
.btn{
width: 70px;
height: 53px;
border-radius: 40px;
border-style: none;
background:
linear-gradient(135deg, hsl(0, 80%,86%), hsl(0, 74%, 74%));
position: absolute;
right: 10%;
box-shadow: 0 5px 20px 0 hsl(0, 36%, 70%);
}
footer{
margin: 10% auto 1% auto;
}
#media only screen and (min-width: 600px){
.main{
margin: 9% 15%;
}
.main h1{
font-size: 4rem;
}
.email{
width: 50%;
}
.btn{
right: 25%;
}
.btn:hover{
width: 90px;
box-shadow: 0 5px 20px 0 hsl(0, 36%, 70%);
background:
linear-gradient(135deg, hsl(0, 80%,86%), hsl(0, 74%, 86%));
cursor: pointer;
transition: width 0.5s;
}
.btn:active{
outline: none;
}
}
/* BIG SCREEN */
#media only screen and (min-width: 1024px){
.logo{
display: none;
}
.logo-desktop{
display: block;
}
.hero-mobile{
display: none;
}
.container{
display: flex;
flex-direction: row-reverse;
height: 100vh;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
/* MAIN SECTION */
.hero{
/* fixed resizing by putting image in css instead of html */
background: url(../images/hero-desktop.jpg) no-repeat center;
background-size: cover;
width: 40%;
}
.left{
background: url(../images/bg-pattern-desktop.svg) no-repeat center ;
background-size: cover;
width: 60%;
height: auto;
}
.text-area{
position: relative;
max-height: 1080px;
height: 100%;
}
.logo-desktop{
width: 20%;
position: absolute;
left: 20%;
top: 5%;
}
.main{
margin: 0;
padding: 0;
text-align: left;
width: 50%;
position: relative;
left: 20%;
top: 25%;
}
.main h1{
margin: 5% auto;
padding: 0;
font-size: 5em;
}
.main p{
line-height: 1.5em;
word-spacing: 3px;
}
.email-form{
margin: 0;
text-align: left;
position: absolute;
left: 19%;
bottom: 10%;
width: 60%;
height: 60px;
}
.email{
width: 70%;
height: 100%;
}
.btn{
position: absolute;
width: 110px;
height: 100%;
}
footer{
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="css/style.css">
<title>Frontend Mentor | Base Apparel coming soon page</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600&display=swap" rel="stylesheet">
<!-- Feel free to remove these styles or customise in your own stylesheet đź‘Ť -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<header>
<img class ="logo" src="images/logo.svg" alt="Base Apparel logo">
</header>
<div class="container">
<div class="hero">
<img class="hero-mobile" src="images/hero-mobile.jpg" alt="Base Apparel model">
</div>
<div class="left">
<div class="text-area">
<img class ="logo-desktop" src="images/logo.svg" alt="Base Apparel logo">
<section class="main">
<h1> We're <br> <span class="soon">
coming <br>
soon </span> </h1>
<p>Hello fellow shoppers! We're currently building our new fashion store.
Add your email below to stay up-to-date with announcements and our launch deals.</p>
</section>
<form class="email-form">
<input class="email" id="email"type="email" placeholder="Email Address" required>
<button class="btn" id="submit" type="submit">
<img src="images/icon-arrow.svg" alt="arrow icon">
</button>
</form>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Ken Yasuge.
</p>
</footer>
</div>
</div>
</div>
</body>
</html>
Please use Chrome DevTools and inspect your text-area div, you will notice that the text area div is not starting at the top. And the problem is with a 5% top margin of your h1 inside the main class.
You can either
Use padding instead of margin: .main h1 { margin: 0; padding: 5% 0 }
Or set margin-top to 0 after the margin you're already using .main h1 { margin-top: 0 }
In your CSS file you have written an media query for BIG SCREEN. In that media query search for text-area class. And change height 100% to this -
.text-area {
position: relative;
max-height: 1080px;
height: calc(100vh - 21px);
}
Please try these. it will work
Firstly put footer under container:
<div class="container">
...
</div>
<footer>
...
</footer>
Then add styles for body :
body {
background: hsl(0, 100%, 98%);
min-height: 100%;
position: absolute;
}
and add style for footer :
footer {
position: inherit;
bottom: 0;
width: 100%;
}
Not sure what's going on here. I re-seized the image to match the width of the div but somehow it still doesn't align with it. I uploaded the issue to codepen here. Tried to play around with the margins but its still doesn't change the behavior.
.propertyOverview.mapView {
height: 430px;
width: 600px;
background-color: white;
display: inline-block;
border: solid 1px #E8E8E8;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
vertical-align: top;
margin-left: 50px;
}
.propertyImage.mapViewPic {
height: 260px;
width: 600px;
border-radius: 5px 5px 0 0;
}
.quickDetails {
margin-top: 10px;
}
.propertyOverview p {
margin: 0px 20px;
font-size: 16px;
font-weight: 400;
letter-spacing: .7px;
font-family: 'Lato', sans-serif;
line-height: 30px;
color: #272635;
}
.propertyOverview .priceDetail {
font-weight: 900;
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #272635;
}
.quickFacts {
border-top: solid 1px #E8E8E8;
padding-top: 5px;
margin-top: 12px;
color: #272635;
font-size: 15px;
}
https://codepen.io/insivika/pen/PEzxPK
As I understand it, I guess you are trying to stretch the image to take up whole width of container. Here is the problem:
<div class="propertyImage mapViewPic">
<img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png"
alt="sample_Property_Map1" alt="">
</div>
.propertyImage.mapViewPic {
height: 260px;
width: 600px;
border-radius: 5px 5px 0 0;
}
You have given a class to parent container of the image and targeting it in CSS.
Instead do this. Remove the extra container div
<div class="propertyOverview mapView">
<img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png"
alt="sample_Property_Map1" alt="" class="propertyImage">
</div>
Update your CSS like this.
.propertyOverview .mapViewPic {
width: 600px;
border-radius: 5px 5px 0 0;
}
Issue is #
.propertyOverview.mapView {
height: 430px;
width: 600px;
}
Where width is 600px and the image width is 360px. Thats why the extra space.
.propertyOverview.mapView {
height: 430px;
width: 360px;
background-color: white;
display: inline-block;
border: solid 1px #E8E8E8;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
vertical-align: top;
margin-left: 50px;
}
.propertyImage.mapViewPic {
height: 260px;
width: 100%;
border-radius: 5px 5px 0 0;
}
.quickDetails {
margin-top: 10px;
}
.propertyOverview p {
margin: 0px 20px;
font-size: 16px;
font-weight: 400;
letter-spacing: .7px;
font-family: 'Lato', sans-serif;
line-height: 30px;
color: #272635;
}
.propertyOverview .priceDetail {
font-weight: 900;
font-family: 'Lato', sans-serif;
font-size: 20px;
color: #272635;
}
.quickFacts {
border-top: solid 1px #E8E8E8;
padding-top: 5px;
margin-top: 12px;
color: #272635;
font-size: 15px;
}
.quickFact1,
.quickFact2,
.quickFact3,
.like {
display: inline-block;
margin-left: 20px;
font-family: 'Lato', sans-serif;
}
.like {
margin-left: 110px;
font-size: 23px;
color: #cccccc;
}
.like:hover,
.like:active {
color: #FF3366;
}
<div class="propertyOverview mapView">
<div class="propertyImage mapViewPic">
<img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png" alt="sample_Property_Map1" alt="">
</div>
<div class="quickDetails">
<p>5689 Main Ave</p>
<p>Los Angeles, CA 90019</p>
<p class="priceDetail">$556,000</p>
</div>
<div class="quickFacts">
<div class="quickFact1">2 br</div>
<div class="quickFact2">2 bth</div>
<div class="quickFact3">4,000 SF</div>
<div class="like"><i class="fa fa-thumbs-up"></i></div>
</div>
</div>
Aligning an image is same as aligning a text....
If you want your image to be centrally aligned with any div tag as you mentioned then their may be two possibilities that either align it relative to the div tag or you align both div and image together
If you want both div and image to be centrally aligned
use
.propertyImage.mapViewPic {
text-align : center;
height: 260px;
width: 600px;
border-radius: 5px 5px 0 0;
}
div{
text-align: center;
}
This will align both of your div and image centrally taking into note that the image is not a child element of the div tag you mentioned, otherwise the image will be aligned with relative to the the div tag
you can use this code
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mm {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
width: 100%;
height: 100vh;
text-align: center;
}
</style>
</head>
<body>
<div class="mm"> <img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/1250833953592952166.png"/> </div>
</body>
</html>
You can check this link
.propertyImage.mapViewPic {
display: flex;
align-items: center;
justify-content: center;
}
You can also set text-align: center; for img tag
**if you want full image of div **
.propertyImage.mapViewPic {
overflow:hidden;
}
.propertyImage.mapViewPic img {
width:100%;
}
https://jsfiddle.net/magnix2k/z1sx03by/1/
I'm trying to align the icons in buttons with the labels and the text next to the button aligned in line perfectly. CSS codes I wrote - 'top: 0;', 'padding: 0;', 'display: block;', 'display: inline-block; and 'vertical-align: middle;' these didn't work for me. What am I missing?
HTML
<div class="service-wrapper">
<div class="services">
<div class="button1"><img src="http://www.evergreenwealthformula.com/new/wp-content/uploads/2017/02/Tech-Support-Icon-3.png" class="iconBtn1">TECHNICAL SUPPORT</div>
<div class="text1"><p>For technical issues with placing or receiving videophone calls.</p></div>
</div>
<div class="services">
<div class="button2"><img src="http://www.evergreenwealthformula.com/new/wp-content/uploads/2017/02/Tech-Support-Icon-3.png" class="iconBtn2">CUSTOMER SERVICES</div>
<div class="text2"><p>For questions about applying for producing, porting, moving, updating your address, or other general questions.</p></div>
</div>
</div>
CSS
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
html, body, #container {
font-size: 18px;
margin: 0;
padding: 0;
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}
p {
line-height: 18px;
font-size: 14px;
}
div {
padding: 0;
margin: 0;
}
.service-wrapper {
width: 100%;
background-color: #000000;
}
.services {
width: 50%;
display: flex;
margin: 0 auto;
border: solid #ff0000 1px;
}
.text1 {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button1 {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
}
.text2 {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button2 {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
}
.iconBtn1{
max-height: 60%;
max-width: 60%;
}
.iconBtn2{
max-height: 60%;
max-width: 60%;
}
It's probably not the best solution but this certainly works:
.button1 img,
.button2 img {
transform: translateY(5px);
-ms-transform: translateY(5px);
-webkit-transform: translateY(5px);
}
Your code with my code implemented: https://jsfiddle.net/z1sx03by/3/
In .button1 and .button2 remove text-align: center and add display: flex, justify-content: center, align-items: center
https://jsfiddle.net/z1sx03by/4/
Since the buttons will be styled identically, you should create one common class and apply it to all. No need to create duplicate classes for each. Give it a shot... Hope this helps! :)
You were close with the display:flex css property. Just needed to tweak a little. Also, no need to add different class names if they are going to have same style property.
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
html, body, #container {
font-size: 18px;
margin: 0;
padding: 0;
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}
p {
line-height: 18px;
font-size: 14px;
}
div {
padding: 0;
margin: 0;
}
.service-wrapper {
width: 100%;
background-color: #000000;
}
.services {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border: solid #ff0000 1px;
}
.text {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px 10px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="service-wrapper">
<div class="services">
<div class="button"><img src="http://via.placeholder.com/20x20" class="iconBtn">
<span>TECHNICAL SUPPORT</span></div>
<div class="text"><p>For technical issues with placing or receiving videophone calls.</p></div>
</div>
<div class="services">
<div class="button"><img src="http://via.placeholder.com/20x20" class="iconBtn"><span>CUSTOMER SERVICES</span></div>
<div class="text"><p>For questions about applying for producing, porting, moving, updating your address, or other general questions.</p></div>
</div>
</div>
I just finished developing my first web page using flexbox. It looks great on my screen resolution (1326x768) but when I test it on a larger screen (1894x787), the content looks crazy stretched. Below are the screen shots:
At 1326x768
At higher screen resolution
Codepen
I had used flex: 1 1 60% on some elements (the % varies of course), but making flex-grow: 0 doesn't really do anything.
I have only set fixed parameters for the containers of images (fixed heights). I haven't set fixed widths for any container.
Am I missing something with flex boxes here?
I guess media queries might be one way to solve this problem but is there any other solution, a more robust way to develop using flex?
How can I make the page look the way it is meant to in all screen sizes not stretched or overly compressed?
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.margin-end {
margin-bottom: 40px;
}
.margin-start {
margin-top: 10px;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
color: #6e6e6e;
font-family: AvenirLTStd-Roman;
font-weight: bolder;
font-size: 1rem;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
/*box-shadow: 0px 10px 5px -9px rgba(0,0,0,0.75);*/
/*border-bottom: solid 1px #ececec;*/
}
.banner-heading {
margin-left: 350px;
font-weight: bolder;
font-size: 1.875rem;
}
.secondary-heading {
/* border: solid;
*/
display: flex;
flex-direction: row;
margin-right: 60px;
font-size: 0.8rem;
justify-content: center;
position: relative;
/* margin: auto;
*/
}
.secondary-heading-1 {
padding-right: 60px;
/* vertical centering */
position: relative;
top: 50%;
transform: translateY(-50%);
font-weight: lighter;
}
.secondary-heading-2 {
/* vertical centering */
position: relative;
top: 50%;
transform: translateY(-50%);
color: #6e6e6e;
font-weight: lighter;
}
.secondary-heading-1 a,
.secondary-heading-2 a {
color: #6e6e6e;
}
.main-content {
display: flex;
flex-direction: row;
/* border:solid;
*/
margin-left: 350px;
margin-right: 60px;
}
.main-content-left {
/* border:dashed;*/
/*width: 200px;
height: 200px;*/
display: flex;
flex-direction: column;
flex: 0 1 60%;
padding-right: 20px;
}
.main-content-left-heading {
width: 100%;
border-bottom: solid 1px #959595;
padding-bottom: 20px;
padding-top: 20px;
}
.main-content-right {
/*border: dashed;*/
/*width: 200px;
height: 200px;*/
margin-left: auto;
flex: 0 1 40%;
}
.main-content-left-heading p {
/*margin:0;
padding:0;*/
line-height: 100%;
}
.main-content-left-heading-1 {
font-family: AvenirLTStd-Roman;
font-style: italic;
color: #6e6e6e;
}
.main-content-left-heading-2 {
padding-top: 5px;
font-family: AvenirLTStd-Roman;
color: #6e6e6e;
font-weight: bolder;
font-size: 1.5rem
}
.main-content-left-image-1 {
padding: 0;
margin: 0;
/* border: solid;
*/
width: 100%;
height: 360px;
background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/010fa5bb-20b9-4603-8e31-3a5e053d936f.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.main-content-left-image-2 {
padding: 0;
margin: 0;
/* border: solid;
*/
width: 100%;
height: 360px;
background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/a49ee715-cd02-4b16-9164-941585e2fbbe.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.main-content-left-image-3 {
padding: 0;
margin: 0;
/* border: solid;
*/
width: 100%;
height: 360px;
background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.main-content-left-text {
/* border:solid;
*/
display: flex;
flex-direction: row;
margin-top: solid;
padding-top: 20px;
/* padding-bottom: 20px;
*/
}
.main-content-left-text-group-left {
padding: 10px 60px 10px 0px;
}
.main-content-left-text-group-left-1 {
padding-bottom: 10px;
font-family: SourceSansBold;
font-size: 0.875rem;
font-weight: 900;
}
.main-content-left-text-group-left-2 {
font-family: SourceSansBold;
font-size: 0.875rem;
color: #888585;
font-weight: 900;
}
.main-content-left-text-group-right {
padding: 10px;
border-left: solid 1px #959595;
}
.main-content-left-text-group-right-1 {
font-family: Avenir-Next-LT-Pro-Demi;
font-size: 1.45rem;
padding-bottom: 20px;
color: #444444;
font-weight: bolder;
}
.main-content-left-text-group-right-2 {
font-size: 1rem;
font-family: SourceSansPro-Regular;
}
.main-content-right {
border-left: solid 1px #959595;
margin-top: 20px;
padding-right: 65px;
padding-left: 20px;
display: flex;
flex-direction: column;
}
.main-content-right-heading {
border-bottom: solid 2px #363636;
height: 65px;
display: flex;
}
.main-content-right-heading p {
font-size: 0.9rem;
margin-top: auto;
font-family: SourceSansBolder;
font-weight: bolder
}
.main-content-right-content {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: solid 1px #959595;
}
.main-content-right-image-1 {
width: 100%;
height: 180px;
background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
background-size: 100% 100%;
}
.main-content-right-image-2 {
width: 100%;
height: 180px;
background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
background-size: 100% 100%;
}
.main-content-right-image-3 {
width: 100%;
height: 180px;
background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
background-size: 100% 100%;
}
.main-content-right-group {
/*border:solid;*/
/* padding-bottom: 10px;
*/
}
.main-content-right-group-1 {
padding-top: 10px;
color: #b8b6b6;
font-family: SourceSansBold;
font-size: 0.875rem
}
.main-content-right-group-2 {
padding-top: 10px;
font-family: Avenir-Next-LT-Pro-Demi;
font-weight: bolder;
color: #444444;
font-size: 1.1rem;
}
<header>
<h1 class="banner-heading">Entrepreneurs Weekly</h1>
<div class="secondary-heading">
<h3 class="secondary-heading-1">BECOME A CURATOR</h3>
<h3 class="secondary-heading-2">ABOUT</h3>
</div>
</header>
<div class="main-content">
<div class="main-content-left">
<div class="main-content-left-heading">
<p class="main-content-left-heading-1">Week 008,</p>
<p class="main-content-left-heading-2">How To create the next Steve Jobs</p>
</div>
<div class="main-content-left-heading">
<div class="main-content-left-image-1">
<!-- <img src="assets/WeeklyContent1.png" />
-->
</div>
<div class="main-content-left-text">
<div class="main-content-left-text-group-left">
<p class="main-content-left-text-group-left-1">POLITICS</p>
<p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
</div>
<div class="main-content-left-text-group-right">
<p class="main-content-left-text-group-right-1">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
<p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p>
</div>
</div>
</div>
<div class="main-content-left-heading">
<div class="main-content-left-image-2">
<!-- <img src="assets/WeeklyContent1.png" />
-->
</div>
<div class="main-content-left-text">
<div class="main-content-left-text-group-left">
<p class="main-content-left-text-group-left-1">POLITICS</p>
<p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
</div>
<div class="main-content-left-text-group-right">
<p class="main-content-left-text-group-right-1">The Texas Tribune updates its premium political coverage for an email</p>
<p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p>
</div>
</div>
</div>
<div class="main-content-left-heading margin-end">
<div class="main-content-left-image-3">
<!-- <img src="assets/WeeklyContent1.png" />
-->
</div>
<div class="main-content-left-text">
<div class="main-content-left-text-group-left">
<p class="main-content-left-text-group-left-1">POLITICS</p>
<p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
</div>
<div class="main-content-left-text-group-right">
<p class="main-content-left-text-group-right-1">The Incline, Billy Penn’s new sister site, launches in Pittsburgh</p>
<p class="main-content-left-text-group-right-2">Like Billy Penn in Philadelphia, the Pittsburgh site will focus on attracting a younger audience through events and aggregation in addition to original reporting.</p>
</div>
</div>
</div>
</div>
<div class="main-content-right">
<div class="main-content-right-heading">
<p>THE LATEST FROM ENTREPRENEUR'S WEEKLY</p>
</div>
<div class="main-content-right-content margin-start">
<div class="main-content-right-image-1">
<!-- image goes as background -->
</div>
<div class="main-content-right-group">
<p class="main-content-right-group-1">WEEK 01</p>
<p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
</div>
</div>
<div class="main-content-right-content">
<div class="main-content-right-image-2">
<!-- image goes as background -->
</div>
<div class="main-content-right-group">
<p class="main-content-right-group-1">WEEK 01</p>
<p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
</div>
</div>
<div class="main-content-right-content">
<div class="main-content-right-image-3">
<!-- image goes as background -->
</div>
<div class="main-content-right-group">
<p class="main-content-right-group-1">WEEK 01</p>
<p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
</div>
</div>
</div>
</div>
This is the source of your problem:
.main-content-left-image-1 {
padding: 0;
margin: 0;
width: 100%; <---- problem
height: 360px; <---- problem
background-image: url("https://gallery.mailchimp.com/f6...");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.main-content-left-image-2 {
padding: 0;
margin: 0;
width: 100%; <---- problem
height: 360px; <---- problem
background-image: url("https://gallery.mailchimp.com/f6...");
background-size: 100% 100%;
background-repeat: no-repeat;
}
If you tell an image to be width: 100% and height: 360px, consider how that plays out.
The width is always the full length of the container. Whether the screen is wide or narrow, the image goes with it.
But you have set a fixed height of 360px. There's no flexibility there.
As a result, the image is flexible horizontally and inflexible vertically, which leads to a loss of aspect ratio / distortion.
There are several possible solutions to this problem:
Responsive css background images
How to make CSS background-image responsive?
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>