I would like the text to spread all over the webpage top to bottom, left to right.
I did it using vw, vh sizes for text size, placed inside a div.
within the text, there are links (.href) of which size is slightly larger.
It currently works with mac 13inch 2015 but for some reason doesn't with 13 inch of 2017.
It also doesn't work on ipad 11 inch portrait.
I am new to media queries and might be doing it all wrong.
Looking forward to your responses! Many thanks.
body {
margin: 0;
height: 100%;
width: 100%;
}
#media only screen
and (min-width: 200px){
.div {
width: 97vw;
height: 97vh;
margin-right: auto;
margin-left: auto;
position: relative;
margin-bottom: 10vw;
}
.txt {
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: justify;
text-justify: inter-word;
line-height: 1.5;
font-size: 2.5vh;
}
.href {
color: #0000ff;
font-size: 3vh;
}
}
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.div {
width: 97vw;
height: 97vh;
margin-right: auto;
margin-left: auto;
position: relative; /* text inside of div */
margin-bottom: 10vw;
}
.txt {
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: justify;
text-justify: inter-word;
line-height: 1.5;
font-size: 3vh;
}
.href {
font-size: 3.5vh;
}
}
#media screen and (min-width: 1025px) {
.div {
width: 97vw;
margin-right: auto;
margin-left: auto;
position: relative; /* text inside of div */
margin-bottom: 10vw;
}
.txt {
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: justify;
text-justify: inter-word;
line-height: 1.5;
margin-bottom: 1rem;
font-size: 2.5vw;
}
.href {
font-size: 3vw;
}
}```
Related
I am a bit confused here... I found some common breakpoints to use for my css media query but am only using max-width such as #media screen and (max-width: 812px) {} etc but it seems to be moving my other media queries around. I thought that this should only affect the code that is 812px or less. Do I need to add both a min-width and max-width to solve the issue ?
#media only screen and (max-width: 50em) and (orientation: portrait) {
label {
width: 100%;
display: block;
position: relative;
}
.nav {
width: 200%;
}
#nav-icon {
font-size: 28px;
line-height: 50px;
padding-left: 1em;
color: #ffffff;
background-color: #f44336;
}
div.nav ul, div.nav li, label{
line-height: 50px;
margin: 0;
padding: 0 2em;
list-style: none;
text-decoration: none;
color: #000;
font-weight: 100;
width: 150%;
position: relative;
font-size: .9em;
}
div.header2_welcome h1{
text-align: center;
font-family: 'Pacifico', cursive;
font-size: 1em;
position: absolute;
top: 5em;
left: 0em !important;
text-decoration: none;
white-space: nowrap;
}
img.pc101 {
width: 20em;
height: 7em;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 27em;
margin-left: -15em;
font-size: .8em;
}
div.natural {
font-size: 150px;
position: relative;
right: .5em;
top: 2em;
animation: drop 2s ease forwards;
margin-bottom: 1em;
}
div.flat {
font-size: 150px;
position: relative;
left: 1200px;
bottom: 450px;
top: 8em;
}
div.treble_clef {
font-size: 100px;
position: relative;
right: 400px;
bottom: 400px;
}
div.crotchet_rest {
font-size: 6em;
position: relative;
left: 100px;
bottom: 800px;
}
div.crotchet {
font-size: 6em;
position: absolute;
left: 3.5em !important;
top: 3em;
animation: drop 2s ease forwards;
}
div.minim {
font-size: 6em;
position: absolute;
left: 1.5em;
top: 2em;
animation: drop 2s ease forwards;
}
}
This is only a sample of my code but don't know it is moving my other media queries around..
I think the following code will help you.
<style>
#media only screen and (max-width:768px) and (min-width:200px)
{
/* Your CSS Code */
}
</style>
The media query may have a lots of condition
only for screen of less than 500px
#media only screen and (max-width:500px)
only for screen between 200px and 500px
#media only screen and (min-width:200px) and (max-width:500px)
only for screen more than 500px
#media only screen and (min-width:500px)
only for screen on every size
#media only screen
only for print on every size
#media only print
only for sqare screen
#media (aspect-ratio: 1/1)
only for sqare screen
#media (aspect-ratio: 1/1)
only for screen of aspect ratio superior to : 16/9
#media (-max-aspect-ratio: 16/9)
ecc.. you can specify pixel-ratio or dpi to better fit your need
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.
Is there a way to have the brand text on the left when on a large screen, then centre when on a small screen? I'm using this atm to centre it but it uses the width so the whole bar is a link.
Name of App
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index: 3;
}
Check this css and make use of media queries to have different css applied at different screen sizes
#media(max-width: 767px) {
.navbar-brand {
position: absolute;
width: 30%;
left: 0;
top: 0;
text-align: left;
margin: auto;
}
}
#media(min-width: 768px) {
.navbar-brand {
position: absolute;
width: 30%;
left: 0;
top: 0;
text-align: center;
margin: auto;
color: orange;
}
.nav.navbar-nav {
margin-left: 30%;
}
}
JSFIDDLE
Thankyou :) was literally about to comment saying i'd sorted it with this
#media (max-width: 768px) {
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index: 3;
}
}
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
}
}
My site, like many others, utilizes bootstrap's carousel on the home page.
For some reason, despite the carousel-control appearing and everything else looking fine, the data slide functionality stops working on monitor sizes less than 480px (so, any mobile device).
Is there a snippet of code I need to add to the #media(max-width:480px) section in the CSS? As it stands I don't have any carousel/responsive related code under that size, but just the following:
#media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
#media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead, .carousel-caption .btn {
font-size: 18px;
}
}
An example can be seen here.
Add a z-index on you carousel-control:
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
position: absolute;
top: 40%;
left: 15px;
color: #fff;
z-index: 99999; /*Add This */
}
What this is doing it just making this control be in front of the slider that is more than the actual screen size.