Now, when i make the window of my codepen narrower, the block with quote responsively goes down, covering both buttons.
I would like it to go up so it doesn't approach the buttons.
Here's the codepen: http://codepen.io/RycerzPegaza/pen/NGpEGp?editors=010
Here's the CSS:
#import url(https://fonts.googleapis.com/css?family=Lato:700|Amatic+SC:700&subset=latin,latin-ext);
body{
background: url('http://i147.photobucket.com/albums/r293/VIEWLINER/REED/RFGF02.jpg~original') no-repeat center center fixed;
background-size: cover;
}
.row-fluid {
position: relative;
top: 200px;
}
p {
font-family: 'Amatic SC';
color: #DDDDDD;
font-size: 250%;
padding: 10px;
}
#qouteblock {
position: relative;
margin-bottom: ;
}
#background{
position: relative;
top: 170px;
background-color:rgba(0,0,0,0.6);
}
.container {
padding: 10px;
}
nav {
position: fixed;
bottom: 5%;
left: 46%;
font-family: 'Lato';
font-size: 18px !important;
}
iframe {
position: fixed;
bottom: 2%;
left: 46%;
}
Use media queries for reduce font-size propierty of .content:
#media (max-width: 650px) {
p {
font-size: 30px
}
}
Related
Here is the CSS code for my webpage, I want to resize this page according to screen size and resolution.
Different div classes are made to style the div containers.
column1 is fixed div at left and column2 is scrollable div which contain further divs that needs to be resized according to the screen size.
<style>
* {
box-sizing: border-box;
}
.column1 {
float: left;
width: 22%;
padding: 10px;
height: auto;
margin: auto;
text-align: center;
line-height: 20pt;
color: #e6b122;
position: fixed;
}
.photo {
margin: auto;
height: 90px;
width: auto;
overflow: hidden;
}
.column2 {
float: right;
width: 78%;
padding: 10px;
height: auto;
}
.photo img {
margin: auto;
max-height: 100%;
width: 80px;
overflow: hidden;
border-radius: 50%;
}
.image {
height: 400px;
max-width: 100%;
background-color: white;
overflow: hidden;
}
.image img {
margin: auto;
width: 700px;
max-height: 100%;
background-color: white;
overflow: hidden;
}
.Skill {
margin: auto;
text-align: center;
line-height: 20pt;
float: left;
width: 33.33%;
padding: 10px;
height: 330px;
border: 4px solid #F281F0;
border-radius: 35px;
}
h4 {
color: #C39D19;
}
p {
font-size: 12px;
font-family: cursive;
}
a {
text-decoration: none;
color: #000;
font-family: Garamond;
font-size: 14px;
}
a:hover {
color: #cc00cc
}
/* Container around content */
.container {
padding: 5px 5px;
position: relative;
background-color: inherit;
width: 50%;
border: 4px solid #CEF334;
border-radius: 25px;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -18px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
#media screen and (max-width: 600px) {
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Arrows*/
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/*For circles*/
.left::after, .right::after {
left: 16px;
}
/* Left containers position */
.right {
left: 0%;
}
</style>
I learned how to layout my webpage by understanding the following CSS Layout tools.
Flexbox
CSS Grid
Media Queries
You use Flexbox and CSS Grid to layout your content, while Media Queries can help your website be responsive to different media(Phone, Tablets, Desktop etc...) sizes.
Goodluck!
Basically, there are two good solutions for your issue:
Use the Media Queries, and set the proper config for your content depends on the viewport of the browser. I can see in the code, that you already use it, so you know how to deal with it.
the second option is to use a flexbox display, which will adjust content size depend on the page width. Here you have probably the best explanation on how to use flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a div :
<div class="titre_section" id="identity_section_titre_section">Identité du déclarant</div>
i need to put a background outside the div to apply a bigger height than the div
for the moment i have :
.titre_section {
position: relative;
#include media-breakpoint-down(sm) {
top: -2em;
}
top: -5em;
left: -2em;
padding-left: 20px;
font-family: $titre_section-font-family;
font-style: normal;
font-weight: bold;
font-size: 22px;
line-height: 25px;
letter-spacing: 0.25px;
color: $form-dark-color;
background: url("/custom/images/titre_section_rectangle.png") no-repeat;
background-size: contain;
}
here the result :
i tried to make this in order to modify the height of the background :
.titre_section::before{
content: "";
background: url("/custom/images/titre_section_rectangle.png") no-repeat;
background-size: contain;
}
but it's not working i don't see the background.
the result need to be like. i can't edit the html because we use zend form system
Here's a quick example using position: absolute to ensure that the background doesn't take up space, and z-index to ensure that the background is behind the content.
.section {
position: relative;
}
.section:before {
content: '';
position: absolute;
width: 400px;
height: 100px;
background: red;
z-index: -1;
}
<div class="section">Identité du déclarant</div>
<div>Lorem ipsum</div>
I have used :pseudo element to add the border effect in the left
.titre_section {
position: relative;
padding: 0px 0 10px 35px;
border-bottom: 1px solid #d2cfc7;
font-weight:bold;
margin-bottom:20px
}
.titre_section:before {
content: '';
position: absolute;
top: 0;
bottom: -20px;
width: 2px;
background: #bb8f29;
left: 20px;
}
<div class="titre_section" id="identity_section_titre_section">Identité du déclarant</div>
So i got this code witch workins great on desktop, but on mobile it is to small.
I've tried to add more on initial-scale, but is there a better way to fix this on mobile? As you can see i've used divs instead of using the background-property on body. This i did for simply it.
At the moment i've set the initial-cale to 1.
Here is the CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: black;
}
.background {
background-image: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8) ), url("image");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body > #container > .logo > img {
position: absolute;
width: 15%;
height: auto;
margin-left: 42%;
margin-top: 5%;
}
#container > .text > h1 {
position: absolute;
width: 22%;
height: auto;
margin-left: 38%;
margin-top: 18%;
box-sizing: border-box;
color: white;
text-align: center;
font-size: 2vw;
}
.supported > a > img {
position: absolute;
width: 15%;
height: auto;
margin-left: 41.2%;
margin-top: 38%;
}
.supported-text {
position: absolute;
width: 22%;
height: auto;
margin-left: 38%;
margin-top: 35%;
box-sizing: border-box;
color: white;
text-align: center;
font-size: 2vw;
font-weight: 600;
}
Thanks for any help!
Solution:
#media screen and (max-width: 768px) {
body > #container > .logo > img {
width: 25%;
margin-left: 36%;
}
#container > .text > h1 {
margin-top: 28%;
font-size: 6vw;
width: 55%;
margin-left: 22%;
}
.supported-text {
font-size: 5vw;
width: 35%;
margin-top: 72%;
margin-left: 32%;
}
.supported > a > img {
width: 28%;
margin-top: 80%;
margin-left: 35%;
}
}
You should use media queries.
#media (max-width: 768px) {
// Change your websites values. For example, if you wish that some text will be larger, give him a new font-size attribute.
}
Note that 768px means to phone view. Moreover, Large screen/ Desktop is 992px and Extra large screen / wide desktop is 1200px.
I've got a full page width image under the nav bar which will then have the title heading placed over it.
The thing is I cannot seem to figure out how to always have it dead centre no matter the size of the page. At the moment when the page is fully open, the title is in the middle, however upon resize the text goes down.
Any ideas?
<div class="row">
<div id="header-image">
<img src="images/header2.jpg" alt="header" class="img-responsive">
<div class="row">
<div class="col">
<h2 class="text-center">About Us</h2>
</div>
</div>
</div><!-- end header image -->
</div><!-- end row -->
#header-image{width: 100%; height: auto; margin-top: 50px; position: relative; min-height: 200px; }
#header-image h2{color: white; font-size: 5em; font-family: 'cmlight'; position: relative; padding-top: 10%; }
#header-image .col {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; }
The use of Media Queries based on the screen size allows you to have different CSS depending on the resolution of the screen. The smaller you scroll the screen, it will then change it's CSS accordingly.
Media Query Tutorial : http://www.w3schools.com/css/css_rwd_mediaqueries.asp
The code below will change the font-size and the padding as the screen goes below the pixel requirements (500px and 200px). The padding was dropped to keep it under the image, and the font size was also lowered.
Solution 1
JS Fiddle : https://jsfiddle.net/Lq2zj48j/7/
#header-image {
width: 100%;
height: auto;
margin-top: 50px;
position: relative;
min-height: 200px;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
}
Solution 2
This solution has the chance of "squashing" the image. To avoid that, you could set the image in CSS (part of the background-image on your #header-image). From there you could set it to not repeat, centered and then use media queries to preserve the aspect ratio and "Zoom" in on the image on resize.
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
Js Fiddle : https://jsfiddle.net/Lq2zj48j/8/
#header-image {
width: 100%;
height: 400px;
margin-top: 50px;
position: relative;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: relative;;
width: 100%;
}
#media only screen and (max-width: 700px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 300px;
}
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 200px;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
#header-image {
height: 175px;
}
}
I need to have a image on div background. Over this image, its mandatory to have one title, subtitle and a button.
All these three elements need to have top and left in % for dynamic position.
I had made several tries, but without success.
HTML
<div id="container">
<div id="block1">
<div id="title">LIAM</div>
<div id="subtitle">SUPER SLIM FIT</div>
<div id="link">
See all jeans
</div>
</div>
</div>
CSS
#block1 {
background-image: url('http://tiffosi.com/fw16/img/img1.jpg');
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 1450px;
max-width: 1086px;
max-height: 1450px;
position: relative;
top: 0;
left: 0;
}
#block1 #subtitle {
font-size: 16pt;
color: white;
position: absolute;
top: 23.4%;
left: 43.5%;
letter-spacing: 1px;
}
#block1 #link {
width: 184px;
text-align: center;
height: 43px;
line-height: 43px;
border: 1px solid white;
font-size: 11pt;
top: 29.3%;
left: 41.3%;
position: absolute;
}
#block1 #link a {
color: white;
text-decoration: none;
font-weight: 100;
}
#media only screen and (min-width : 768px) {
#block1 #title{
top: 12%;
left:42%;
font-size:80%;
}
}
#media only screen and (min-width : 992px) {
#block1 #title {
font-size: 100%;
position: absolute;
top: 16.5%;
left: 42%;
letter-spacing: 2px;
}
}
#block1 #title {
font-size: 97px;
color: white;
position: absolute;
top: 16.5%;
left: 42%;
letter-spacing: 2px;
}
Link to jsffidle: https://jsfiddle.net/jggscada/
instead of positioning each element individually , i suggest you give position:absolute to #block1 and position it on the image ( image as background to #container or make another div surrounding the #block1 div ) .
i used top:40vh -> vh=viewport height
and then position the elements inside the block1 as you desire.
also i deleted the #link div and added styles directly to the link instead. seems more logical this way :) . if you want a link to behave like a div use display:block , in this case i used display:inline-block
VERY IMPORTANT : do not use fixed width and height if you want something to be responsive. i used width:100vw on .container so it has the width of the screen.
see snippet below or fiddle here > Jsfiddle
let me know if it works for you
#container {
background-image: url('http://tiffosi.com/fw16/img/img1.jpg');
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 1450px;
max-width: 1086px;
max-height: 1450px;
position: relative;
top: 0;
left: 0;
border: 1px solid red;
}
#block1 #title {
font-family: oswald-bold;
font-size: 60pt;
color: white;
letter-spacing: 5px;
}
#block1 #subtitle {
font-family: oswald-bold;
font-size: 16pt;
color: white;
letter-spacing: 1px;
}
#block1 a{
width: 184px;
text-align: center;
height: 43px;
line-height: 43px;
border: 1px solid white;
font-family: Oswald-Medium;
font-size: 11pt;
color: white;
text-decoration: none;
font-weight: 100;
display:inline-block;
margin-top:50px;
}
#block1 {
position:absolute;
top:40vh;
left:0;
margin:0 auto;
right:0;
text-align:center;
}
<div id="container">
<div id="block1">
<div id="title">LIAM</div>
<div id="subtitle">SUPER SLIM FIT</div>
See all jeans
</div>
</div>