I am trying to position two SVG images (Tobias-Raketfart.svg class="turbotobias-shake turbotobias-rocket-img" & TurboTobias-Blue-clouds.svg class="turbotobias-smoke"). Everytime I come up with a solution it is nowhere near being responsive.
I've been playing around with position: absolute; and then positioning with bottom and right. This makes the result looks good on my PC monitor but awful on pretty much any other screen. What can I do in order to position the two SVG images?
Mobile mockup of end result I am trying to achieve
PC mockup of end result I am trying to achieve
HTML:
<body>
<div class='turbotobias-hero-section-wrapper'>
<div class='turbotobias-row'>
<div class='turbotobias-column'>
<div class='turbotobias-first-column'>
<h1 class="turbotobias-fp-h1">Vil du have
<div class="turbotobias-h1-enhanced">raketfart</div>
<div class="turbotobias-h1-smaller">på din hjemmeside?</div>
</h1>
<span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
</div>
</div>
<div class='turbotobias-column'>
<div class='turbotobias-second-column'>
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt="" class="turbotobias-shake turbotobias-rocket-img">
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt="" class="turbotobias-smoke"></img>
</div>
</div>
<div class="turbotobias-divider-clouds"></div>
</div>
</div>
</body>
CSS:
body {
background: #fff;
color: #333333;
margin: 0;
box-sizing: border-box;
font-family: open sans,Arial,sans-serif;
font-size: 14px;
overflow: hidden;
word-break: break-word;
}
.turbotobias-hero-section-wrapper {
height: 100vh;
background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.turbotobias-column .turbotobias-first-column {
display: flex;
align-self: center;
align-items: center;
flex-direction: column;
}
.turbotobias-first-column {
font-weight: 700;
text-transform: uppercase;
background-color: rgba(0,0,0,0);
border-left-width: 10px;
border-left-style: solid;
border-left-color: #0082a4;
padding-top: 20px!important;
padding-bottom: 20px!important;
padding-left: 20px!important;
margin-top: 0px!important;
display: flex;
align-items: center;
}
.turbotobias-h1-enhanced {
font-weight: 900;
font-size: 120%;
}
.turbotobias-h1-smaller {
font-size: 70%;
}
#media (min-width: 980px) {
h1.turbotobias-fp-h1 {
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: 700;
font-size: 60px !important;
color: #303030!important;
line-height: 1em;
text-transform: uppercase;
}
}
#media (max-width: 979px) {
h1.turbotobias-fp-h1 {
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: 700;
font-size: 33px !important;
color: #303030!important;
line-height: 1em;
text-transform: uppercase;
}
}
.turbotobias-sub-h1 {
font-size: 24px;
color: #303030;
font-weight: 400;
font-family: open sans,Arial,sans-serif;
text-transform: uppercase;
text-align: left;
}
.turbotobias-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
max-width: 1080px;
height: 100vh;
margin: auto;
}
.turbotobias-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
}
.turbotobias-smoke {
position:absolute;
bottom: 0;
width: 470px;
height: auto;
z-index: 9;
right: 30%;
}
.turbotobias-rocket-img {
position: absolute;
bottom: 30%;
right: 36%;
width: 180px;
height: auto;
z-index: 11;
}
.turbotobias-divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
left: 0;
height: 100px;
position: absolute;
width: 100%;
z-index: 10;
}
#media screen and (min-width: 800px) {
.turbotobias-column {
align-self: center;
flex: 1
}
}
#media (max-width: 980px) {
.turbotobias-row {
padding: 30px 0;
}
}
Code snippet
Some changes have been made. The question is, why does not the cloud appear? - Light-Above-clouds-HD-TurboTobias.jpg
Div with the class turbotobias-second-column should always center two svg and you should only control it.
body {
background: #fff;
color: #333333;
margin: 0;
font-family: open sans, Arial, sans-serif;
font-size: 14px;
overflow: hidden;
}
.turbotobias-hero-section-wrapper {
height: 100vh;
background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.turbotobias-first-column {
text-transform: uppercase;
border-left: 10px solid #0082a4;
padding: 20px 0 20px 20px;
margin-top: 0;
font-weight: 700;
}
#media (max-width: 799px) {
.turbotobias-first-column {
text-align: center;
}
}
.turbotobias-fp-h1 {
margin: 0 0 20px 0;
font-size: calc(12px + 2vw);
font-weight: 600;
line-height: 90%;
}
.turbotobias-h1-enhanced {
font-size: calc(24px + 2vw);
font-weight: 900;
line-height: 100%;
}
.turbotobias-h1-smaller {
font-size: calc(17px + 1vw);
font-weight: 600;
}
.turbotobias-sub-h1 {
font-size: calc(14px + 0.5vw);
font-weight: 400;
}
.turbotobias-sub-h1 {
color: #303030;
}
.turbotobias-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
max-width: 1080px;
height: 100vh;
margin: auto;
}
.turbotobias-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
}
.turbotobias-second-column {
display: flex;
justify-content: center;
max-width: 470px;
margin: auto;
}
.turbotobias-rocket-img {
bottom: 30%;
width: 180px;
height: auto;
z-index: 11;
}
.turbotobias-smoke {
position: absolute;
bottom: 0;
max-width: 470px;
height: auto;
z-index: 9;
}
.turbotobias-shake {
animation: shake 2s infinite cubic-bezier(0.79, 0.04, 0.39, 0.81) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#media (max-width: 790px) {
.turbotobias-rocket-img {
z-index: 2;
max-width: 420px;
}
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(1px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-2px, 0, 0);
}
40%,
60% {
transform: translate3d(2px, 0, 0);
}
}
.turbotobias-divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
left: 0;
height: 100px;
position: absolute;
width: 100%;
z-index: 10;
}
#media (min-width: 800px) {
.turbotobias-column {
align-self: center;
flex: 1
}
}
#media (max-width: 980px) {
.turbotobias-row {
padding: 30px 0;
}
}
<div class='turbotobias-hero-section-wrapper'>
<div class='turbotobias-row'>
<div class='turbotobias-column'>
<div class='turbotobias-first-column'>
<h1 class="turbotobias-fp-h1">Vil du have
<div class="turbotobias-h1-enhanced">raketfart</div>
<div class="turbotobias-h1-smaller">på din hjemmeside?</div>
</h1>
<span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
</div>
</div>
<div class='turbotobias-column'>
<div class='turbotobias-second-column'>
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt=""
class="turbotobias-shake turbotobias-rocket-img">
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt=""
class="turbotobias-smoke"></img>
</div>
</div>
<div class="turbotobias-divider-clouds"></div>
</div>
</div>
Related
I have a card in the snippet below. I'm trying to figure out how to apply a transition speed to the scaled image on hover. What I've tried isn't working.
I have an arrow icon at the base of the card with a transition speed applied. It is working fine. I've set the speed of the icon different so you can see the difference.
How do I apply a transition speed to the photo image being scaled on hover? (not the icon)
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
font-style: normal;
}
a {
color: #005fec;
}
a:hover {
text-decoration: underline;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
#media (min-width: 768px) {
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4 + img {
margin-top: 3rem;
}
h6 {
font-size: 1rem;
line-height: 1.5rem;
}
.kicker {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.kicker--bold, .kicker--bold {
font-weight: 700;
}
.img-fluid {
width: 100%;
height: auto;
}
.next__cards {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
#media (min-width: 576px) {
.next__cards {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.next__card {
position: relative;
overflow: hidden;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 0 1.5rem 2rem;
}
.next__card--link {
display: flex;
flex-flow: row wrap;
width: 1.5rem;
}
.next__card--link-spacer {
transition: all 2s ease;
}
.next__card--link:hover .next__card--link-spacer {
flex-grow: 1;
}
.next__card--link ::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
#media (min-width: 576px) {
.next__card {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
.next__card:hover {
box-shadow: 0px 8px 12px rgba(25, 30, 36, 0.08);
}
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform .2s;
}
.next__card:hover img.next__card-img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
#media (min-width: 576px) {
.next__card {
max-width: 50%;
}
}
.next__card-content {
padding: 2.5rem;
}
.next__card-title {
margin: 1.5rem auto 2rem;
}
.next__card .kicker, .next__card-title {
padding: 0;
}
.next__card:hover .next__card-title {
color: #005fec;
}
.next__card-footer {
width: 100%;
}
#media (min-width: 992px) {
.next__card {
max-width: 376px;
}
.next__card:first-child {
margin-left: 0;
}
.next__card:last-child {
margin-right: 0;
}
}
<div class="next__cards">
<div class="next__card">
<img class="img-fluid next__card-img" src="https://www.nextiva.com/assets/jpg/case-study/xCase-Studies-Jersey-College-card.jpg.pagespeed.ic.Ai7henX86J.jpg" alt="">
<div class="next__card-content">
<h6 class="kicker kicker--bold">customer story</h6>
<h4 class="next__card-title">
See how EagleRider switched phone providers easily
</h4>
<div class="next__card-footer">
<a class="next__card--link" target="_blank" href="#">
<span class="next__card--link-spacer"></span>
<img src="https://www.nextiva.com/assets/svg/arrow-right.svg" alt="right arrow">
</a>
</div>
</div>
</div>
</div>
Altering the transition on the img does work. But of course we need to make sure we pick the right image.
The scaleable img can be selected and the transition altered in this styling:
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform 3s; /* changed from .2s */
}
Here's the altered snippet that does that:
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
font-style: normal;
}
a {
color: #005fec;
}
a:hover {
text-decoration: underline;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
#media (min-width: 768px) {
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4+img {
margin-top: 3rem;
}
h6 {
font-size: 1rem;
line-height: 1.5rem;
}
.kicker {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.kicker--bold,
.kicker--bold {
font-weight: 700;
}
.img-fluid {
width: 100%;
height: auto;
}
.next__cards {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
#media (min-width: 576px) {
.next__cards {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.next__card {
position: relative;
overflow: hidden;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 0 1.5rem 2rem;
}
.next__card--link {
display: flex;
flex-flow: row wrap;
width: 1.5rem;
}
.next__card--link-spacer {
transition: all 2s ease;
}
.next__card--link:hover .next__card--link-spacer {
flex-grow: 1;
}
.next__card--link ::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
#media (min-width: 576px) {
.next__card {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
.next__card:hover {
box-shadow: 0px 8px 12px rgba(25, 30, 36, 0.08);
}
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform 3s;
/* changed from .2s */
}
.next__card:hover img.next__card-img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
#media (min-width: 576px) {
.next__card {
max-width: 50%;
}
}
.next__card-content {
padding: 2.5rem;
}
.next__card-title {
margin: 1.5rem auto 2rem;
}
.next__card .kicker,
.next__card-title {
padding: 0;
}
.next__card:hover .next__card-title {
color: #005fec;
}
.next__card-footer {
width: 100%;
}
#media (min-width: 992px) {
.next__card {
max-width: 376px;
}
.next__card:first-child {
margin-left: 0;
}
.next__card:last-child {
margin-right: 0;
}
}
<div class="next__cards">
<div class="next__card">
<img class="img-fluid next__card-img" src="https://www.nextiva.com/assets/jpg/case-study/xCase-Studies-Jersey-College-card.jpg.pagespeed.ic.Ai7henX86J.jpg" alt="">
<div class="next__card-content">
<h6 class="kicker kicker--bold">customer story</h6>
<h4 class="next__card-title">
See how EagleRider switched phone providers easily
</h4>
<div class="next__card-footer">
<a class="next__card--link" target="_blank" href="#">
<span class="next__card--link-spacer"></span>
<img src="https://www.nextiva.com/assets/svg/arrow-right.svg" alt="right arrow">
</a>
</div>
</div>
</div>
</div>
UPDATE: If it is required that the img not only scales but also 'breaks out' of its parent, so that it can all be seen without cropping then make the parent have overflow visible.
Here is the altered snippet:
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
font-style: normal;
}
a {
color: #005fec;
}
a:hover {
text-decoration: underline;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
#media (min-width: 768px) {
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4+img {
margin-top: 3rem;
}
h6 {
font-size: 1rem;
line-height: 1.5rem;
}
.kicker {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.kicker--bold,
.kicker--bold {
font-weight: 700;
}
.img-fluid {
width: 100%;
height: auto;
}
.next__cards {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
#media (min-width: 576px) {
.next__cards {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.next__card {
position: relative;
overflow: hidden;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 0 1.5rem 2rem;
}
.next__card--link {
display: flex;
flex-flow: row wrap;
width: 1.5rem;
}
.next__card--link-spacer {
transition: all 2s ease;
}
.next__card--link:hover .next__card--link-spacer {
flex-grow: 1;
}
.next__card--link ::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
#media (min-width: 576px) {
.next__card {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
.next__card {
overflow: visible;
}
.next__card:hover {
box-shadow: 0px 8px 12px rgba(25, 30, 36, 0.08);
}
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform 3s;
/* changed from .2s */
}
.next__card:hover img.next__card-img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
#media (min-width: 576px) {
.next__card {
max-width: 50%;
}
}
.next__card-content {
padding: 2.5rem;
}
.next__card-title {
margin: 1.5rem auto 2rem;
}
.next__card .kicker,
.next__card-title {
padding: 0;
}
.next__card:hover .next__card-title {
color: #005fec;
}
.next__card-footer {
width: 100%;
}
#media (min-width: 992px) {
.next__card {
max-width: 376px;
}
.next__card:first-child {
margin-left: 0;
}
.next__card:last-child {
margin-right: 0;
}
}
<div class="next__cards">
<div class="next__card">
<img class="img-fluid next__card-img" src="https://www.nextiva.com/assets/jpg/case-study/xCase-Studies-Jersey-College-card.jpg.pagespeed.ic.Ai7henX86J.jpg" alt="">
<div class="next__card-content">
<h6 class="kicker kicker--bold">customer story</h6>
<h4 class="next__card-title">
See how EagleRider switched phone providers easily
</h4>
<div class="next__card-footer">
<a class="next__card--link" target="_blank" href="#">
<span class="next__card--link-spacer"></span>
<img src="https://www.nextiva.com/assets/svg/arrow-right.svg" alt="right arrow">
</a>
</div>
</div>
</div>
</div>
The image is cut off a bit and the text to the left isn’t centering also I tried to add a min-height to the pics and max-width to banner image for responsiveness but they didn’t take. any tips on these?
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Comfortaa', cursive;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
h1 {
font-family: 'Righteous', cursive;
font-size: 4rem;
}
img {
width: 100%;
}
header {
height: 8vh;
width: 90%;
margin: 0 auto;
}
.nav-links {
height: 8vh;
width: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-link:hover {
border-bottom: 4px black solid;
}
.banner {
background-image: url(/Aleesha/woman\ wit\ hat.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 30vh;
margin-bottom: 2vh;
}
.hats {
display: flex;
height: 40vh;
}
.hat-text {
border: 2px dotted;
flex: 1;
display: flex;
}
h2 {
width: 100%;
border: 2px dotted;
font-size: 8rem;
align-items: center;
}
#slider {
flex: 1.8;
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
width: 100%;
float: left;
max-width: 20%;
min-height: 100%;
object-fit: contain;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<html>
<body>
<main>
<!--BANNER-->
<section class="banner">
<div class="container">
<div class="banner-content">
<h1>ALEESHA</h1>
</div>
</div>
</section>
<!--HATS-->
<section class="hats">
<div class="hat-text">
<H2>HATS</H2>
</div>
<div id="slider">
<figure>
<img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Black Reptile Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide2.jpg" alt="Cheeta Squence Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide3.jpg" alt="White Thug Life Bucket Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide4.jpg" alt="yellow W worn blue hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Life is Fantastic yellow hat">
</figure>
</div>
</section>
</main>
</body>
</html>
I was trying to make this parallax-website. In the CSS I am defining properties for .image1 . So I wrote down properties and then just below it I again wrote some properties for the same class .image1. But only the ~ opacity, position (from 1st) and other properties defined (from 2 time) were applied. I checked the it using Inspect Element and all other properties were cut down. I am not able to understand why this is happening. Please help me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.70;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg');
min-height: 100%;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>
I think you need to mention background image as "background-image". You are declaring background property individually. or you can write like that way :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg') no-repeat fixed center center;
background-size: cover;
min-height: 100%;
opacity: 0.70;
position: relative;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>
I've seen this asked on SO but I can't seem to get it to work. I am trying to take a horizontal ul and have it change to vertical when the screen size is less than 768px.
Here is my css code:
/* HeaderWrap */
#headerwrap {
background: url(../img/topgraph.png) no-repeat center top;
position: relative;
background-color: #3e86c3;
background-size: cover;
margin-top: -20px;
padding-top: 200px;
height:100vh;
background-attachment: scroll;
background-position: 0px 0px;
background-repeat: no-repeat;
min-height: 650px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#headerwrap h1 {
text-align: center;
margin-top: 60px;
margin-bottom: 15px;
color: white;
font-size: 45px;
font-weight: 300;
letter-spacing: 1px;
}
#headerwrap h2 {
text-align: center;
margin: 60px 200px 15px 200px;
color: white;
font-size: 35px;
font-weight: 300;
letter-spacing: 1px;
}
#headerwrap .header-links {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 160px;
color: #fff;
padding-bottom: 20px;
}
#headerwrap ul {
text-align: center;
text-decoration: none;
list-style-type: none;
margin: 0;
overflow: hidden;
}
#headerwrap li {
float: left;
padding-left: 18%;
font-size: 24px;
}
#headerwrap img {
width: 100px;
height: 100px;
}
#media (max-width: 768px) {
#headerwrap {
padding-top: 100px;
}
#headerwrap h1 {
margin-top: 60px;
font-size: 36px;
}
#headerwrap h2 {
margin: 30px 50px 15px 50px;
font-size: 20px;
}
#headerwrap .header-links {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 340px;
color: #fff;
padding-bottom: 20px;
}
#headerwrap li {
font-size: 18px;
display: block !important;;
padding: 0;
}
#headerwrap img {
width: 60px;
height: 60px;
}
<div id="headerwrap">
<div class="row">
<h1>Headline</h1>
<h2>Marketing blurb </h2>
<div class="col-lg-6">
</div>
<div>
<!--<img src="img/topgraph.png" class="bg">-->
</div>
</div>
<div class="header-links">
<ul>
<li><img src="img/icons/icnDevelopers_wh.png"><br>Prebid.JS</li>
<li><img src="img/icons/icnGetStarted_wh.png"><br>Get Started!</li>
<li><img src="img/icons/icnAdOps_wh.png"><br>Ad Ops</li>
</ul>
</div>
</div>
<!-- /headerwrap -->
No matter what I do within the #media query the li elements stay horizontal. Any help would be appreciated.
On your #media you have to set the width property of your ul and li to the 100%
#media (max-width: 768px) {
...
#headerwrap ul {
float: left;
width: 100%;
}
#headerwrap li {
width: 100%;
}
...
}
Very simple example using flexbox.
https://codepen.io/anon/pen/QZEXVg
Key is the media query enforcing the constraint.
#media (min-width: 768px) {
.navbar__list {
display: flex;
justify-content: flex-start;
}
}
Add width: 100% to the <li> in the #media query.
Demo:
/* HeaderWrap */
#headerwrap {
background: url(../img/topgraph.png) no-repeat center top;
position: relative;
background-color: #3e86c3;
background-size: cover;
margin-top: -20px;
padding-top: 200px;
height:100vh;
background-attachment: scroll;
background-position: 0px 0px;
background-repeat: no-repeat;
min-height: 650px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#headerwrap h1 {
text-align: center;
margin-top: 60px;
margin-bottom: 15px;
color: white;
font-size: 45px;
font-weight: 300;
letter-spacing: 1px;
}
#headerwrap h2 {
text-align: center;
margin: 60px 200px 15px 200px;
color: white;
font-size: 35px;
font-weight: 300;
letter-spacing: 1px;
}
#headerwrap .header-links {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 160px;
color: #fff;
padding-bottom: 20px;
}
#headerwrap ul {
text-align: center;
text-decoration: none;
list-style-type: none;
margin: 0;
overflow: hidden;
}
#headerwrap li {
float: left;
padding-left: 18%;
font-size: 24px;
}
#headerwrap img {
width: 100px;
height: 100px;
}
#media (max-width: 768px) {
#headerwrap {
padding-top: 100px;
}
#headerwrap h1 {
margin-top: 60px;
font-size: 36px;
}
#headerwrap h2 {
margin: 30px 50px 15px 50px;
font-size: 20px;
}
#headerwrap .header-links {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 340px;
color: #fff;
padding-bottom: 20px;
}
#headerwrap li {
font-size: 18px;
display: block !important;
padding: 0;
width: 100%
}
#headerwrap img {
width: 60px;
height: 60px;
}
<div id="headerwrap">
<div class="row">
<h1>Headline</h1>
<h2>Marketing blurb </h2>
<div class="col-lg-6">
</div>
<div>
<!--<img src="img/topgraph.png" class="bg">-->
</div>
</div>
<div class="header-links">
<ul>
<li><img src="img/icons/icnDevelopers_wh.png"><br>Prebid.JS</li>
<li><img src="img/icons/icnGetStarted_wh.png"><br>Get Started!</li>
<li><img src="img/icons/icnAdOps_wh.png"><br>Ad Ops</li>
</ul>
</div>
</div>
<!-- /headerwrap -->
Remove float: left; for the "regular" li elements and add display: inline-block instead. Otherwise they will also be floated (displayed next to each other) on smaller screens.
Or add float: none in the media query.
I'm trying to add align="center" to this card that is from Material Design Lite:
<main class="mdl-layout__content" align="center">
<div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">
<strong>FOOBAR TEXT</strong>
</h2>
</div>
<div class="mdl-card__supporting-text"></div>
</div>
I've tried adding it at each one of these divs both all together and separately and the contents with my card still won't center.
This is what it looks like from my end:
The text in the center are actually MDL buttons that appear to be text until you mouse hover over them and they "pop out" to be a button (just a bell and whistle component). As you can see, "California" isn't quite centered, and quite frankly neither are the buttons (despite the main class element containing align="center").
I am using the MDL Portfolio Template:
Preview of the template
Download link of the template
Here is the CSS as requested:
.portfolio-max-width {
max-width: 900px;
margin: auto;
justify-content: center;
}
.portfolio-header {
position: relative;
background-image: url(images/header-bg.jpg);
}
.portfolio-header .mdl-layout__header-row {
padding: 0;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.mdl-layout__title {
font-size: 14px;
text-align: center;
font-weight: 300;
}
.is-compact .mdl-layout__title span {
display: none;
}
.portfolio-logo-row {
min-height: 200px;
}
.is-compact .portfolio-logo-row {
min-height: auto;
}
.portfolio-logo {
background: url(images/logo.png) 50% no-repeat;
background-size: cover;
height: 150px;
width: 150px;
margin: auto auto 10px;
}
.is-compact .portfolio-logo {
height: 50px;
width: 50px;
margin-top: 7px;
}
.portfolio-navigation-row {
background-color: rgba(0, 0, 0, 0.08);
text-transform: uppercase;
height: 45px;
}
.portfolio-navigation-row .mdl-navigation {
text-align: center;
max-width: 900px;
width: 100%;
}
.portfolio-navigation-row .mdl-navigation__link {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 42px;
}
.portfolio-header .mdl-layout__drawer-button {
background-color: rgba(197, 197, 197, 0.44);
}
.portfolio-navigation-row .is-active {
position: relative;
font-weight: bold;
}
.portfolio-navigation-row .is-active:after {
content: "";
width: 70%;
height: 2px;
display: block;
position: absolute;
bottom: 0;
left: 0;
background-color: rgb(255,64,129);
left: 15%;
}
.portfolio-card .mdl-card__title {
padding-bottom: 0;
}
.portfolio-blog-card-full-bg {
background: url(images/example-blog03.jpg) center / cover;
}
.portfolio-blog-card-event-bg {
background: url(images/example-blog05.jpg) center / cover;
}
.portfolio-blog-card-strip-bg {
background: url(images/example-blog06.jpg) center / cover;
}
.portfolio-blog-card-compact .mdl-card__title {
padding-bottom: 0;
}
.portfolio-blog-card-bg > .mdl-card__actions {
height: 52px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);
}
img.article-image {
width: 100%;
height: auto;
}
.portfolio-max-width {
max-width: 900px;
margin: auto;
}
.portfolio-copy {
max-width: 700px;
}
.no-padding {
padding: 0;
}
.no-left-padding{
padding-left: 0;
}
.no-bottom-padding {
padding-bottom: 0;
}
.padding-top {
padding: 10px 0 0;
}
.portfolio-share-btn {
position: relative;
float: right;
top: -4px;
}
.demo-card-event > .mdl-card__actions {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.portfolio-contact .mdl-textfield {
width: 100%;
}
.portfolio-contact form {
max-width: 550px;
margin: auto;
}
footer {
background-image: url(images/footer-background.png);
background-size: cover;
}
use the css text-align property
.card
{
width:270px;
height:250px;
padding:2px;
text-align:center;
box-shadow:1px 1px 2px #333;
font-family:Liberation Sans;
}
<div class="card">
<div class="card-header">
<h4>CALIFORNIA</h4>
</div>
<div class="card-body">
<strong><p>xxxxxxxxx</p></strong>
<strong><p>xxxxxxxxxxx</p></strong>
<strong><p>xxxxxxxxxxx</p></strong>
<strong><p>xxxxxxxxx</p></strong>
</div>
</div>