i put online my website but if i watch it from smartphone or small device every elements cant view in a responsive way! this fact never happened to me. Why?
In staging mode i cant view this website in a responsive mode, than i suppose this is not a js problem but a css error
body {
width: 100%;
margin: 0;
background: #fff;
}
a {
color: blue;
text-decoration: line-through;
}
p {
color: blue;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
.white-contact {
background-color: #fff;
padding: 20px;
margin-top: 30px;
}
a:hover {
color: black;
text-decoration: underline;
}
h1 {
position: absolute;
z-index: 998 !important;
/* margin: 0 auto; */
width: 100%;
text-align: center;
height: 100vh;
line-height: 75vh;
font-size: 13em;
color: #fff;
font-family: 'Condiment', cursive;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
letter-spacing: 2px;
color: blue;
text-transform: uppercase;
text-decoration: line-through;
}
h2.last {
color: blue !important;
}
li {
list-style: none;
color: blue;
font-family: 'Montserrat', sans-serif;
margin-bottom: 2px;
}
ul.do {
padding-left: 0px;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
letter-spacing: 2px;
color: blue;
}
h3.top-left {
position: fixed;
left: 0px;
padding-left: 30px;
width: 49%;
z-index: 999;
}
h3.top-right {
position: fixed;
right: 0px;
padding-left: 30px;
width: 49%;
z-index: 999;
text-align: right;
padding-right: 30px;
}
h3.bottom-left {
position: fixed;
z-index: 999;
padding-left: 30px;
bottom: 0px;
}
h3.bottom-right {
bottom: 0px;
position: fixed;
text-align: right;
padding-right: 30px;
z-index: 999;
width: 49%;
right: 0px;
}
.top {
}
.bottom {
}
a.social {
text-decoration: line-through;
}
a.social:hover {
text-decoration: underline;
color: yellow;
}
canvas#canv {
z-index: 1;
position: absolute;
}
.mekis-img {
width: 100%;
position: absolute;
z-index: 1;
text-align: center;
height: 100vh;
margin-top: 10%;
}
section{
margin-top: 50px;
}
section.top {
height: 100vh;
margin-top: 0px;
border-bottom: 1px solid blue;
}
section.second {
height: 100vh;
/* background-image: url('http://i.giphy.com/3oEdvcNIvJXteYUEXm.gif');*/
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
section.third {
height: 100vh;
background-image: url('http://i.giphy.com/Dc5JEeUuPosN2.gif');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
section.last {
height: 100vh;
background-image: url('http://static2.blog.corriereobjects.it/seigradi/wp-content/blogs.dir/70/files/2013/02/div1.gif');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.twitter {
text-align: center;
height: 100vh;
/* line-height: 50vh; */
font-size: 1em;
text-transform: uppercase;
font-weight: 900;
padding-top: 10%;
}
}
img.gif-second {
position: absolute;
right: 60px;
opacity: 0.8;
margin-top: -40%;
z-index: -1;
}
.container {
width: 90%;
margin:0 auto;
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
}
<!doctype html>
<!-- CSS -->
<title>Mekis | Official Website</title>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Mekis Official Website | Producer , Dj Brescia, Italy | Electro, Reggae, Dub, Drum and Bass, Big Beat | Electro vs Rock with Joao at Lio Bar, Road to Zion Electro Dub, Jungle Massive," />
<meta name="keywords" content="brescia dj, mekisdj, mekis, unnu can wid mi, drop 39, djset, electro, rock, dub, reggae, alternative, producer, electro vs rock, road to zion, sound design" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<link rel='stylesheet' id='default-style-css' href='style.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js'></script>
<script type='text/javascript' src='viewport.js'></script>
<!-- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>
<!-- FONTS -->
</head>
<body>
<section class="top">
<canvas id='canv'>
</canvas>
<div class="top">
<h3 class="top-left">Mekis / msdvc</h3>
<h3 class="top-right">Official Web</h3>
</div>
<audio loop autoplay>
<source src="http://static1.grsites.com/archive/sounds/vehicle/vehicle005.mp3" type="audio/mpeg">
</audio>
<div class="mekis-img">
<img src="img/mekis.png" alt="mekis">
</div>
<div="bottom">
<h3 class="bottom-left"><a class="social" href="https://www.facebook.com/mekisdj/" target="blank">Facebook</a></h3>
<h3 class="bottom-right"><a class="social" href="https://instagram.com/mekisdj/" target="blank">Instagram</a></h3>
</div>
</section>
<section class="second">
<div class="container">
<h2>Ciao! My name is Mekis.<br/>Everyday i do some works</h2>
<h3>What i do?</h3>
<ul class="do">
<li>President at Cockroach Int. Production</li>
<li>Music Production</li>
<li>Dj and Producer</li>
<li>Sound Designer</li>
<li>Professor for Laba for Sound Design and Computer Graphic</li>
<li>Web at Adoratorio Creative Collective</li>
</ul>
<p>-</p>
<h3>What i love</h3>
<ul class="do">
<li>Music and Sound FX</li>
<li>Reggae</li>
<li>Pizza with Salami</li>
<li>Friday Night</li>
</ul>
<p>-</p>
<h3>What i hate</h3>
<ul class="do">
<li>Conventional Design and Music Production</li>
<li>Mostarda</li>
</ul>
<!-- <img class="gif-second" src="img/mekis.png"> -->
</div>
</section>
<section class="third">
<!-- <div class="container">
<h2>I love Twitter</h2>
<div class="twitter">
<p class="twitter">tweet with me. hashtag #mekisdj (for music) or #msdvc (for web)</p>
</div>
</div> -->
</section>
<section class="last">
<div class="container">
<h2 class="last">Ok. Say hello!</h2>
<div class="white-contact">
<h3>Send me email for booking</h3>
<p>Yes. I love Gmail<br/>
massimo.devicienti[at]gmail.com<p>
</div>
<div class="white-contact">
<h3>Press Kit</h3>
<p>Do you want more info about my projects?<br/>
click and download my press kit<p><br/>
<small>in coming</small>
</div>
</div>
</section>
<!--
Variation of Screwed:
http://codepen.io/tmrDevelops/pen/xwBYvN
!-->
</body>
<script type='text/javascript' src='script.js'></script>
<!--<script type='text/javascript' src='preloader.js'></script>-->
</html>
link for website
enter link description here
you forgot for responsive view as
<meta name="viewport" content="width=device-width, initial-scale=1">
the issue is mentioning values in px. These fixed values wouldn't change on resolution change. whereas values like em and % would change on resolution change. Also, we have responsive frameworks to do the task for us. We need to make use of media queries.
Also we need to add the meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!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.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
I'm trying to replicate a snack bar box in css to practice some things I've learned in a tutorial. I have two div items inside another div ("10" and "bars") that I'm trying to get to stack. But they just sit next to each other.
Here is my code:
/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/
/*GLOBAL STYLE
------------------------------*/
body {
background: #769A30;
}
#font-face {
font-family: 'Akzidenz';
src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}
h1, h2 {
color: #F0CD92;
font-family: 'Akzidenz';
}
/*HEADER
------------------------------*/
.headerSection {
text-align: center;
background: #612D22;
margin: 0px;
padding: 0px;
height: 100px;
}
.headerDiv {
display: inline-block;
text-align: center;
background: red;
height: 100px;
width: 100px;
line-height: 100px;
}
#middleDiv {
display: inline-block;
}
.middleSubDiv {
text-align: center;
display: inline-block;
background: #E63A3E;
height: 50px;
width: 100px;
line-height: 50px;
}
.topH1 {
margin: 0px;
padding: 0px;
}
.topH2 {
margin: 0px;
padding: 0px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Larabar | Apple Pie</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="headerSection"><!--
--><div class="headerDiv"><!--
---><h1 class="topH1">value<h1><!--
--></div><!--
--><div id="middleDiv"><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">10<h2><!--
---></div><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class="headerDiv"><!--
--><h1 class="topH1">pack<h1><!--
--></div><!--
--></div>
<footer>
</footer>
</body>
</html>
If I remove "display: inline-block;" from the middleSubDiv class (the two divs that are supposed to stack) they DO stack correctly, but then the divs right next to them are pushed down. Can someone help me understand why this is? Here is a picture of what I'm talking about
Thank you, any help is greatly appreciated!
Remove the display: inline-block; from the .middleSubDiv and add vertical-align: bottom; to the .headerDiv.
/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/
/*GLOBAL STYLE
------------------------------*/
body {
background: #769A30;
}
#font-face {
font-family: 'Akzidenz';
src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}
h1, h2 {
color: #F0CD92;
font-family: 'Akzidenz';
}
/*HEADER
------------------------------*/
.headerSection {
text-align: center;
background: #612D22;
margin: 0px;
padding: 0px;
height: 100px;
}
.headerDiv {
display: inline-block;
text-align: center;
background: red;
height: 100px;
width: 100px;
line-height: 100px;
vertical-align: bottom;
}
#middleDiv {
display: inline-block;
}
.middleSubDiv {
text-align: center;
/* display: inline-block;*/
background: #E63A3E;
height: 50px;
width: 100px;
line-height: 50px;
}
.topH1 {
margin: 0px;
padding: 0px;
}
.topH2 {
margin: 0px;
padding: 0px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Larabar | Apple Pie</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="headerSection"><!--
--><div class="headerDiv"><!--
---><h1 class="topH1">value<h1><!--
--></div><!--
--><div id="middleDiv"><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">10<h2><!--
---></div><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class="headerDiv"><!--
--><h1 class="topH1">pack<h1><!--
--></div><!--
--></div>
<footer>
</footer>
</body>
</html>
I am helping a student with a project and we are going through a tutorial. The tutorial is here:
https://ihatetomatoes.net/demos/parallax-scroll-effect/
Here is our index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>joeys school project</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<body>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-1">
<div class="hsContainer">
<div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-1 h2">
<h2>Mac Vs. Windows</h2>
<p>Which is better? Which should you choose?</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Here is our main.css:
body {
margin: 0;
}
.mac_header {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
/* CSS */
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
opacity: 0;
}
.hsContent {
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 0 8%;
text-align: center;
}
.hsContent h2,
.copy h2 {
color: #ffffff;
font-size: 45px;
line-height: 48px;
margin-bottom: 12px;
}
.hsContent p {
width: 400px;
margin: 0 auto;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {
background-image:url('../img/computers-1227142.jpg');
height: 733px;}
The issue is we can see the block for the text when we inspect the page in Chrome, but it is not displaying the text over the image. All we see is the outline of the div where it is located. We have researched how to get this working and also followed the tutorial correctly. Also we have compared our code to the tutorial and can't see where the disconnect is. Any ideas? At this point a solution that works instead of what is in the tutorial will be fine as well.
I'm looking for some CSS help. I am working on my church's website, and I am trying to get the mobile version of my supposedly responsive theme to resize header images. Right now the header image doesn't seem to resize, or at least not completely.
Website: http://www.rochestertrinity.com/kids.html
What I'm hoping to get is to have the header image scale to the exact width of whatever the display size is. So things would look essentially the same on desktop, but on mobile the user would see the entire header image. I've attached a mock up image of what I see now and what I'd like to see.
image of what I see vs what I'd like
I'm not a CSS expert, but I suspect the code that manages this is in one of the following snippets:
/* Tall Header Page */
.tall-header-page .banner-wrap {
display: table;
width: 100%;
min-height: 450px;
padding-top: 50px;
text-align: center;
}
.tall-header-page .banner-wrap .container {
height: 450px;
}
.tall-header-page .banner-wrap .banner h2 {
font-size: 70px;
padding-top: 65px;
}
OR
/* Banner */
.banner-wrap {
position: relative;
max-width: 100%;
height: auto;
padding: 55px 0;
box-sizing: border-box;
background: #ffffff url('default-bg.jpg') center center no-repeat;
background-size: cover;
}
.banner-wrap:before {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
background: rgba(0, 0, 0, 0);
content: ' ';
}
.banner-wrap .container {
display: table;
overflow-y: hidden;
height: 100%;
}
.banner-wrap .banner {
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.banner-wrap .banner h2 {
padding-bottom: 30px;
color: #ffffff;
word-spacing: .1em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
font-size: 100px;
font-weight: normal;
line-height: 1.1em;
}
.banner-wrap .banner p {
padding-bottom: 40px;
color: #ffffff;
letter-spacing: .03em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 1.4em;
}
.banner-wrap .banner .button-wrap {
display: inline-block;
}
.banner-wrap .banner .wsite-button {
text-align: center !important;
}
.banner-wrap .banner .wsite-button .wsite-button-inner {
background: #ff8345;
color: #ffffff !important;
}
.banner-wrap .banner .wsite-button:hover .wsite-button-inner {
background: #e56525;
}
I hope someone can help.
Thanks!
UPDATE 2016-04-22
tall-header.html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class='tall-header-page wsite-theme-light'>
<div class="wrapper">
<div class="paris-header">
<div class="container">
<label class="hamburger"><span></span></label>
<div class="logo">{logo}</div>
<div class="nav desktop-nav">{menu}</div>
</div><!-- end .container -->
</div><!-- end .header -->
<div class="banner-wrap wsite-background">
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
</div>
</div>
</div>
<div class="main-wrap">
<div class="container">
<div class="content-wrap">{content}</div>
</div><!-- end container -->
</div>
<div class="footer-wrap">
<div class="container">
<div class="footer">{footer}</div>
</div><!-- end container -->
</div><!-- end footer-wrap -->
</div>
<div class="nav mobile-nav">
<label class="hamburger"><span></span></label>
{menu}
</div>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>
In your kids.html you have this, it overwrites your CSS-Code:
<style>
.wsite-background {background-image: url("//cdn1.editmysite.com/uploads/6/5/4/8/65485229/background-images/2036811843.jpg") !important;background-repeat: no-repeat !important;background-position: 50.00% 37.71% !important;background-size: 100% !important;background-color: transparent !important;}
body.wsite-background {background-attachment: fixed !important;}.wsite-background.wsite-custom-background{ background-size: cover !important}
</style>
Delete or Change this part of the code and it works:
.wsite-background.wsite-custom-background {
background-size: cover !important;
}
In your CSS-File you have this media query:
Explanation to media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media screen and (max-width: 992px) {
write this line of code in your media query:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: 100% 100% !important; }
Its not perfect, an other solution whould be this, then you have to change the height of the element:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: 100% auto !important; }
or this:
.banner-wrap.wsite-background.wsite-custom-background{ background-size: contain !important; }
Explanation to background-size: http://www.w3schools.com/css/css3_backgrounds.asp
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 7 years ago.
I'm creating a webpage for my photography and basically I'm trying to create div boxes that contain the images, with a div for text displayed over the image. For some reason I cannot work out how to make the text div position from the image div. For example, currently "top: 8%;" positions the text 8% from the top of the page not the top of the image div, despite the fact that the text div is withing the image div in the code and positioned relatively.
HTML:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Josh Graham, amateur photographer</title>
<meta name="description" content="Photography by Josh Graham">
<meta name="author" content="Josh Graham">
<!-- CSS Code -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="icon"
type="image/png"
href="images/favicon.png">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="BROKENjs/script.js"></script>
</head>
<body>
<div id="wrapper">
<table id=menu >
<tr>
<td id=josh-graham>josh-graham.com</td>
<td>Home</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
<div id="home" data-speed="10" data-type="background">
<div></div>
</div>
<div id="ukrainetext">
<img id="ukraine" src="images/ukraine.jpg"/>
<p id="ukrainetextp">Chernobyl,<br>Ukraine</p>
</div>
<div id="cornwalltext">
<img id="cornwall" src="images/cornwall.jpg"/>
<p id="cornwalltextp">Cornwall,<br>England</p>
</div>
<div id="moscowtext">
<img id="moscow" src="images/moscow.jpg"/>
<p id="moscowtextp">Moscow,<br>Russia</p>
</div>
</div>
</body>
</html>
CSS:
html, body{
margin:0;
padding:0;
height:100%;
width:100%;
background: #3e3e3e;
}
#wrapper {
min-width: 640px;
margin-bottom: 0;
}
#menu {
background: #5d5d5d;
font-family: "Kozuka Gothic Pro";
font-size: 20px;
font-weight: lighter;
color: white;
height: 50px;
margin: 0 auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
min-width:640px;
position: relative;
z-index:99;
}
table td {
padding-top: 13px;
}
#josh-graham {
font-size:25px;
padding-top: 6px;
padding-left: 5px;
}
#ukrainetext {
position: relative;
}
#ukrainetextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 6%;
}
#ukraine {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float: left;
}
#cornwalltext {
position: relative;
}
#cornwalltextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 25%;
}
#cornwall {
height: auto;
margin: 0.3% auto;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
#moscowtext {
position: relative;
}
#moscowtextp {
font-family: "Kozuka Gothic Pro";
font-size: 25px;
font-weight: lighter;
color: white;
position: absolute;
left: 80%;
margin-top: 43.5%;
}
#moscow {
height: auto;
margin: 0.3% auto;
margin-bottom: 0.3%;
width: 100%;
max-width: 1920px;
position: relative;
float:left;
}
This is a frequently asked question. Your answer: How to position text over an image in css . Jsfiddle: http://jsfiddle.net/EgLKV/3/
HTML:
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
<p id="text">
Hello World!
</p>
</div>
CSS:
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
#text
{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
Just set the z-index in your CSS. Higher numbered elements appear above lower numbered elements. While you can just give elements contiguous whole numbers; generally, you'll want to provide large gaps between lower and higher elements in case you need to add additional elements or change the layering of elements.