I recently published a website http://marishomeimprovements.com/
There is a picture in the background on the top of the page and for whatever reason, it won't load through Safari on iPhones.
html:
<section class="home" id="home">
<div class="overlay">
<div class="title">
<p>The Best Remodeling Company</p>
<h1>We Are Maris Home Improvements</h1>
<p>Specializing in Decks, Windows, Siding and More.</p>
<div class="giftCardAd">
<h1 class="heading"><span id="callNow">Call Now!</span></h1>
<h3>$25 gift card with free estimate.</h3>
<h2>636-778-4343</h2>
<h4>We are here for you.</h4>
</div>
</div>
</div>
</section>
css:
.home{
height: 600px;
background-image: url('../images/background.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
background-size: cover;
text-align: center center;
overflow: hidden;
}
.home .overlay{
background-color: rgba(0, 0, 0, 0.25);
height: 600px;
padding: 70px 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.home .overlay .title h1{
font-size: 45px;
color: #fff;
letter-spacing: 1px;
font-weight: 600;
margin: 0;
}
.home .overlay .title p{
line-height: 1.6em;
color: #ddd;
font-size: 16px;
font-weight: 300;
margin-top: 20px;
}
.home .overlay .title .a-btn{
font-weight: 400;
display: inline-block;
margin-top: 30px;
margin-right: 20px;
background-color: #0060e2;
color: #fff;
}
.home .overlay .title .a-btn:hover{
border: 1px solid #0060e2;
color: #fff;
background-color: transparent;
}
#media screen and (max-width: 480px){
.home .overlay .title .bannerImage{
display:none;
}
.box .item .location{
display:none;
}
.heading{
font-size:30px;
}
}
And then some more:
#media only screen and (max-width: 600px) {
.home div .title{
margin-top:4em;
clear:both;
width:90%;
}
.home div .title h1{
font-size:35px !important;
}
.giftCardAd{
width:95%;
}
#live-chat{
display:none;
}
}
The issue that I have with this is that it doesn't load the picture in or at least it doesn't display it properly to the user on iPhones.
I've tried changing the format of the picture from jpg to png but nothing seems to be working.
I would greatly appreciate the help!
Remove your background-attachment: fixed it's causing the problem
Related
I am trying to use a Video as a Background in a loop and muted. The Problem is, that i want to have a heading and subheading centered over the video. Although when using something like position: absolute on the video it breaks the complete responsiveness of the page.
I tried putting absolute position on the video, which does work if it shouldnt be responsive. Also tried something with relative position, although then the text is at the right side of the video (because its the second flex item in the row). How is the correct approach to center text over a background video? For images i tend to use the background-image tag, which according to my research, does not work for videos.
<div className='homeImage'>
<video loop autoPlay muted>
<source src={video} type="video/mp4"/>
</video>
<div className='home-content'>
<h1 className='mb-4'>My Name</h1>
<h2>This is a blog</h2>
</div>
</div>
.homeImage{
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.home-content{
height: 100vh;
width: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.home-content h1{
font-size: 90px !important;
color: #fff !important;
z-index: 10;
}
.home-content h2{
font-size: 40px !important;
color: #fff !important;
z-index: 10;
}
.homeImage img,video{
opacity: 0.5;
height: 100vh;
z-index: 0;
width: 100%;
object-fit: cover;
position: absolute;
}
#media (max-width: 767px){
.home-content h1{
font-size: 60px !important;
}
.home-content h2{
font-size: 35px !important;
}
}
#media (max-width: 497px){
.home-content h1{
font-size: 30px !important;
}
.home-content h2{
font-size: 20px !important;
}
}
This is how it looks after modifying the CSS:
So its sadly still not responsive
To position text over a video (or img for that matter). You can wrap the text and video in a div (which you've already done). Make the div position: relative; and position the text with position: absolute;. This way the content stays in the flow of the page, while allowing you to position the text however you want!
.homeImage{
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/* added code */
position: relative;
}
.home-content{
height: 100vh;
width: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* added code */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.home-content h1{
font-size: 90px !important;
color: #fff !important;
z-index: 10;
}
.home-content h2{
font-size: 40px !important;
color: #fff !important;
z-index: 10;
}
.homeImage img,video{
opacity: 0.5;
height: 100vh;
z-index: 0;
width: 100%;
object-fit: cover;
/* remove position: absolute; from here*/
}
#media (max-width: 767px){
.home-content h1{
font-size: 60px !important;
}
.home-content h2{
font-size: 35px !important;
}
}
#media (max-width: 497px){
.home-content h1{
font-size: 30px !important;
}
.home-content h2{
font-size: 20px !important;
}
}
<div className='homeImage'>
<video loop autoPlay muted>
<source src={video} type="video/mp4"/>
</video>
<div className='home-content'>
<h1 className='mb-4'>My Name</h1>
<h2>This is a blog</h2>
</div>
</div>
I tried to use media query for the first time to make a simple section responsive where the font-size gets smaller when the screen is small
but for some reason it didn't work for me please if you see something that i dont infrom me
here is the HTML code that i use for the project
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
EYD
</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
</head>
<body>
<main>
<div class="mainco">
<h1>
welcome to <br><span>EYD</span>
</h1>
<h2>best web-developing service on the internet</h2>
<div class="buttons">
<p>ORDER</p>
<p>HOW IT WORKS</p>
</div>
</div>
</main>
<!-- ******************************************************** -->
<section>
</section>
</body>
</html>
here is the CSS code that contains the media query targeting a h1 element in the page
CSS:
/*this is a universal selector to clear the padding and margin*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
/*-------------------------------------
main
--------------------------------------*/
/*here is the style of the main as a section*/
main{
background: url(code1.jpg) purple;
background-repeat: no-repeat;
background-size:cover ;
width: 100%;
height: 630px;
color: white;
font-family: "alternate gothic";
padding: 20px 0 0 0;
}
/*the style of the main section's text block*/
.mainco{
width: 40%;
max-height: 70%;
text-align: center;
margin: 10% 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#media only screen and (max-width: 800px){
.mainco h1{
font-size:20px;
}
}
/*the style of the h1 of the text*/
.mainco h1 {
font-size: 60px;
}
.mainco h1 span{
text-shadow: 3px 3px rgb(167, 119, 119); font-size: 75px;
}
/*the style of h2 of the text*/
main h2{
font-size: 50px;
}
.buttons{
min-width: 400px;
}
/*the style of the two button's text containers*/
.buttons p{
padding: 20px;
background-color: brown;
display: inline-block;
margin: 60px 20px;
}
/*styling the button's text*/
.buttons a{
text-decoration: none;
color: white;
display: block;
width: 100%;
height: 100%;
}
Always put your media queries at the end of your CSS code. That will stop the the other h1 declarations from overriding your media query.
the main problem with your CSS code is the order
Your declaration .mainco h1 overwrite previously declared media query so if you change your CSS to this, it will work.
your media query should be bellow your global CSS
/*here is the style of the main as a section*/
main{
background: url(code1.jpg) purple;
background-repeat: no-repeat;
background-size:cover ;
width: 100%;
height: 630px;
color: white;
font-family: "alternate gothic";
padding: 20px 0 0 0;
}
/*the style of the main section's text block*/
.mainco{
width: 40%;
max-height: 70%;
text-align: center;
margin: 10% 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#media only screen and (max-width: 800px){
.mainco h1{
font-size:20px;
}
}
/*the style of the h1 of the text*/
.mainco h1 {
font-size: 60px;
}
.mainco h1 span{
text-shadow: 3px 3px rgb(167, 119, 119); font-size: 75px;
}
/*the style of h2 of the text*/
main h2{
font-size: 50px;
}
.buttons{
min-width: 400px;
}
/*the style of the two button's text containers*/
.buttons p{
padding: 20px;
background-color: brown;
display: inline-block;
margin: 60px 20px;
}
/*styling the button's text*/
.buttons a{
text-decoration: none;
color: white;
display: block;
width: 100%;
height: 100%;
}
I've set a blue background image, added some content and was done. I've tried zooming in the site, and whenever I zoom in, the background image automatically pushes itself up and does not cover the founders and half of the yellow arrow.
How it looks normally
How it looks when I zoom in
Any idea on how to fix this?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 900px;
margin: 0 auto;
}
.post-header {
background-color: #20cfcf;
background-image: url("../img2/header_background.png");
background-size: cover;
background-position: center center;
height: 60Vh;
text-align: center;
}
.post-header h2 {
text-align: center;
padding-top: 2em;
font-weight: 800;
font-size: 1.7em;
color: #172025
}
.post-header h1 {
font-size: 92pt;
font-weight: 900;
color: white;
margin: 0;
margin-top: em;
}
.founders {
margin-top: -6em;
}
.arrow-box {
position: relative;
background: url("https://i.imgur.com/gp3z7z5.png") no-repeat center center;
background-size: contain;
margin: auto;
width: 400px;
height: auto;
margin-top: -3em;
}
.arrow {
position: relative;
display: flex;
text-decoration: none;
align-items: center;
justify-content: center;
font-size:1.7rem;
height:80px;
color: black;
}
.dev-description {
font-size: 1.4em;
font-weight: 300;
line-height: 1.3em;
}
.recognize {
margin-top: 3em;
text-transform: uppercase;
font-weight: 700;
}
.images {
padding: 1em;
display: inline;
margin-top: 2em;
}
.images:hover,
.images:focus {
color: white;
}
.img-container {
margin-top: 1.3em;
}
<section class="post-header">
<div class="wrapper">
CHYBA TU
<h2>HI. WE'RE TILDE.</h2>
<h1>WE LIVE AND <br> BREATHE CODE.</h1>
<img src="img2/founders.png" class="founders" height="294px" width=425px alt="">
<div class="arrow-box">
Meet the team
</div>
<div class="container">
<p class="dev-description">
We're a small team of developers who are passionate about crafting great software.
We're some of the faces behind Ember.js, Ruby on Rails, jQuery and more. <br>
We're here to help you build the products and tools of the future.
</p>
<p class="recognize">
you may recognize us from around town
</p>
<div class="img-container">
<div class="images">
<img src="img2/rails.png" alt="">
</div>
<div class="images">
<img src="img2/jquery.png" alt="">
</div>
<div class="images">
<img src="img2/ember.png" alt="">
</div>
<div class="images">
<img src="img2/handlebars.png" alt="">
</div>
<div class="images"></div>
<img src="img2/bundler.png" alt="">
</div>
</div>
</div>
</div>
</section>
Thanks in advance. Let me know if something is unclear.
I think you can do like this.
.post-header {
background-color: #20cfcf;
background-image:
url("../img2/header_background.png");
background-size: cover;
background-position: center center;
height: 582px;
text-align: center;
}
An alternate solution is to adjust the markup of your hero so that the people and arrow images are positioned at the bottom of the background, this means it will work on mobile/desktop and all heights, widths and zoom levels.
In this solution, we create a .hero container and place everything that is meant to be in front of the blue background inside of it. We position the images absolutely, from the bottom, transforming the arrow down 50%.
If you run into issues with the hard-coded height from the other answer then this will work for you.
.hero {
background-color: #20cfcf;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 100px 0 200px;
position: relative;
text-align: center;
}
.preheading {
font-size: 1.7em;
font-weight: 800;
text-transform: uppercase;
}
.heading {
color: #fff;
font-size: 92pt;
font-weight: 900;
text-transform: uppercase;
}
.people {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
img {
border: 1px solid black;
}
<div class="hero">
<div class="preheading">Hi. We're Tilde.</div>
<div class="heading">We live and<br>breate code.</div>
<img class="people" src="https://via.placeholder.com/400x300">
<img class="arrow" src="https://via.placeholder.com/200x80">
</div>
I am making a simple header with text and a button but when I go on mobile everything isn't responsive . I tried using %'s but nothing was working. And my CSS jumps up and down when I scroll on mobile. This is the codepen, https://codepen.io/Religion/pen/ZEQerQZ. Below is the CSS . HTML you can check on the codepen due to the post saying it's mostly code.
CSS:
#media only screen and (max-width: 767px) {
.header1{
padding: 15%;
text-align: center;
background-image: url('https://manchesterdental.org/img/dentalimg/welcomenote.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
color: white;
font-size: 30px;
position: relative;
}
.header-text1 h2{
margin-top:20%;
font-size:1.8rem;
width:45vh;
margin-left:-20%;
color:white;
}
.header-text1 p{
font-size:1.1rem;
width:44vh;
margin-left:-20%;
padding-top:40px;
color:white;
font-weight: 500;
}
.header-text{
position: absolute;
bottom:0;
left:0;
width:1px;
}
.button {
background-color: #00aeef; /* Green */
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
margin-left: 2%;
width:95%;
margin-bottom: 20px;
}
}
#media (min-width:900px) {
.header1{
padding: 60px;
text-align: center;
background-image: url("{% static 'dentist/img/bg-img/header.jpg' %}");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
color: white;
font-size: 30px;
height:80vh;
}
.header-text1 h2{
margin-top:10%;
color:white;
font-size: 3rem;
}
.header-text1 p{
padding-top:40px;
font-size:1.5rem;
max-width:80%;
margin-left:10%;
color:white;
font-weight: 500;
}
.button {
background-color: #00aeef; /* Green */
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
margin-left: 2%;
width:45%;
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight:800;
}
}
HTML:
<div class="header1">
<div class = "header-text1">
<h2>We Believe Everyone Should Have Easy Access To Great Dental Care</h2>
<p >As a leading industry innovater, * Dental Business* is opening up exciting new opportunities for dental professionals, investors, employees & suppliers. Contact us to find out what we have to offer you.</p>
<br>
<button class="button button1">Contact Us!</button>
</div>
</div>
To keep the text elements centered in the div, you can make use of flexbox. Simply add the following code to the top of your CSS file before the media queries:
.header-text1 {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
Also, no need to include this with your media queries since flexbox will handle everything regardless of viewport size.
This Codepen had the updated code - also changed the second media query so that the CSS doesn't break between 767px and 900px like it did before.
You are currently setting the margin-top property to 20% of the height of the button itself.
If you want the margin to respond to the width of the viewport, then use something like:
margin-top: 2vw; // 2% of the viewport width
However, for the margin-top property, I suggest using the height of the viewport like so:
margin-top: 1vh; // 1% of the viewport height (1% should be enough)
So I've set up my HTML and I've began to start styling accordingly, however I'm trying to create a fill/covering effect so my image fits between the header and footer and covers the screen however I get this problem. What I want is for it to cover the whole page/screen.
I'm sure it's an easy fix, I just can't figure it out!
http://s28.postimg.org/he9h8lae3/screene.png
Heres my code
HTML
`<body>
<header id="page-header">
<div class="container">
<h1></h1>
<h2></h2>
</div>
</header>
<section class="page-main">
<div class="container">
<div class ="main">
</div>
</div>
</section>
<footer id="page-footer">
<div class="container">
<h4></h4>
<nav>
<ul>
<li>Got Feedback?</li>
</ul>
</nav>
</footer>
</div><!-- #container -->
</body>
</html>
CSS
body {
color: #000;
font-family: 'Rokkitt', serif;
font-size: 1em;
line-height: 1.2;
width: 100%;
height: 100%; }
#container {
max-width: 1280px;
margin: auto; }
main { display: block }
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 2em;
line-height: 1;
font-weight: bold; }
h2 {
font-size: 1.2em;
margin: 20px 0 20px 20px;
text-align: center; }
h3 { }
#page-header {
background-color: #FFB90F;
color: black;
overflow: hidden; }
#page-header h1 {
color: black;
margin: 20px 0 20px 20px;
text-align: center; }
.page-main {
background: url("../images/img_a.png") center center no-repeat;
height: auto;
background-size: cover;
overflow: hidden;
padding: 3%;
box-shadow: inset 0 0 5px rgba(0,0,0,.75); }
#page-footer {
background: #282828;
color: white; }
#page-footer nav { text-align: right; }
#page-footer nav li {
color: white;
display: block; }
#page-footer nav a {
color: white;
display: block;
margin-right: 20px; }
If you want to cover the space you may want to look into the CSS3 background-size.
element{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
CSS
I am assuming the background image is attached to div.container
.container{
background-image: url('Whateveryoururlis');
height: HeightofImage;
width: widthofImage;
}
Height and width are important.