I've got some text I'd like to scale and then move up so it's over an image on a mobile.
<style>
#rcontainer {
height: 340px;
width: 100%;
position: relative;
}
.rtext span {
position: absolute;
bottom: 130px;
font-family: "Georgia", serif;
font-size: 1.8em;
color: white;
padding: 0 40px;
width: 100%;
line-height: 110%;
}
#media screen and (min-width: 0px) and (max-width: 720px) {
.rtext {
font-size: 50%;
padding: 0 40px 100px 0;
}
</style>
<div id="rcontainer">
<img alt="" src="/portals/0/Images/photos/rexanne_griffeth_contact_info_850.png" />
<p class="rtext">
<span>Contact: Rexanne Griffeth<br />
6000 Hospital Drive<br />
Hannibal, MO 63401<br />
(573) 629-3564<br />
rexanne.griffeth#hrhonline.org
</span></p>
</div>
I'm trying to size the font (which works with my media query but I can't seem to move the text up and over the image.
Here is my dev URL. current results
Change the bottom attribute in the media query:
#media screen and (min-width: 0px) and (max-width: 720px) {
.rtext {
font-size: 50%;
padding: 0 40px 100px 0;
bottom: 220px
}
Related
The CSS media query for small devices isn't working for Android when screen is rotated in landscape mode, the background color isn't changing, and the form overflows.
The site works good, when screen rotation is turned off, I don't know why is this happening, since there is no problem in IOS, only in Android.
The CSS code:
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body,
html {
height: 100%;
margin: 0;
}
body {
background: linear-gradient(to top left, #5487ab 17%, #ffffff 102%) fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 549px) {
.houseImg {
display: none;
}
.container {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #f1f1f1e0;
height: 386px;
width: 278px;
border-radius: 9px;
margin: auto;
margin-top: 4rem;
}
.brand {
display: block;
margin: auto;
width: 29%;
padding-top: 28px;
}
.brandName {
font-family: 'Source Serif Pro', serif;
display: block;
text-align: center;
font-size: 19px;
color: #0060a3;
letter-spacing: 0.4px;
margin: 0;
margin-top: 7px;
}
.usrTxtField {
background-color: #f1f1f1e0;
width: 237px;
height: 31px;
border: 1px solid #8c8b8b;
border-radius: 7px;
font-size: 16px;
padding-left: 8px;
font-family: 'Maven Pro', sans-serif;
color: #252525;
transition: none;
display: block;
margin: auto;
}
.usrTxtField:focus {
border: 2px solid #3d79a2;
}
.usr {
margin-left: 20px;
margin-bottom: 4px;
margin-top: 20px;
font-family: 'Maven Pro', sans-serif;
font-size: 12.5px;
color: #5a5a5a;
}
.submitLogIn {
background-color: #0060a3;
border: none;
display: block;
margin: auto;
text-align: center;
height: 40px;
width: 125px;
margin-top: 17px;
border-radius: 25px;
color: #fff;
font-size: 14px;
letter-spacing: 0.4px;
font-family: 'Maven Pro', sans-serif;
cursor: pointer;
}
.checkboxSave {
margin-left: 20px;
margin-top: 10px;
}
.saveText {
font-family: 'Maven Pro', sans-serif;
color: #5a5a5a;
font-size: 12px;
}
.forgotPassword {
font-family: 'Maven Pro', sans-serif;
color: #0060a3;
font-size: 12px;
text-decoration: none;
margin-left: 18px;
}
}
The HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Art</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Maven+Pro:500&display=swap" rel="stylesheet">
</head>
<body>
<div class="gridContainer">
<div class="container">
<img src="img/artLogo.png" class="brand">
<p class="brandName">ART PS GROUP</p>
<form autocomplete="off">
<p class="usr">Username</p>
<input type="text" name="usrTxt" class="usrTxtField">
<p class="usr">Password</p>
<input type="password" name="password" class="usrTxtField">
<input type="submit" name="submit" value="Log In" class="submitLogIn">
<input type="checkbox" name="save" class="checkboxSave"><span class="saveText">Remember me</span>Forgot Your Password?
</form>
</div>
<div class="container2">
<img src="img/birdHouse.jpg" class="houseImg">
</div>
</div>
</body>
</html>
This happens because your android device screen has a height greater than 549px (considering your media query specifications). Naturally in landscape mode, this height becomes device width and hence your media query is ignored.
this is the media query you can target for almost all phones
/* phones (portrait and landscape) ----------- */
#media only screen and (min-width : 320px) {
/* Styles */
}
/* phones (portrait only) ----------- */
#media only screen and (max-width : 480px) {
/* Styles */
}
It is not possible to accomplish responsive design with only one media query. For making responsive design right, please visit and check this site, where media queries are explained and are examples on how to use it.
Android phone and iOS phone doesn't necessarily use the same width and height, most iOS phones uses width: 375px and height: 667px(or width: 667px and height: 375px when in landscape mode), although that is only for iPhone 6/7/8 excluding Plus and other models, you can check width/height which phone use which in Chrome/Mozzila Firefox/etc. in developer mode while emulating mobile devices.
Giving fixed width for DOM elements can mess up the view in small devices. particularly when the given width is not available as the device width goes less than that width.
So while writing media queries for smaller devices, say mobile phones, It would be great if you replace all the fixed widths to percentages. So that they will not overflow from the available space and will stay within the device width.
If you are having issues specifically for landscape, you can handle them using media query and orientation combination.
#media all and (max-width: 768px) and (orientation: landscape) {
}
Above code is enough for writing rules for small devices when used in landscape orientation.
I want to have three different layouts of my web page for different browser widths (i.e. desktop, tablet, phone).
In the tablet layout (between 768px and 991px of the browser) I should have three elements, two in the first row (thus each of them taking 6/12 of the browser width) and the a third in the second row (taking 12/12 of the browser width).
This is what I want:
What I want - IMAGE
But I have a problem with this layout:
I am not able to set the third element borders aligned with the left and right borders of first and second element, as you see.
This is what I have done:
What I have - IMAGE
Can you help me?
Note: I want the element '3' wide as '1'+'2' width only for tablet layouts! For other layouts I want what I already did, i.e same width for every element (1,2 or 3).
This is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Our Menu</title>
<link rel ="stylesheet" href="css/style.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p1"> Chicken</p>
</div>
<div class="col-lg-4 col-md-6 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p2"> Beef</p>
</div>
<div class="col-lg-4 col-md-12 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p3"> Sushi</p>
</div>
</div>
</body>
</html>
This is the css:
/* width and height will include border and padding */
* {
box-sizing: border-box;
}
h1 {
margin-bottom: 15px;
text-align: center;
}
/*Set an anchor for the container of p elements*/
div.anchor{
position: relative;
}
#p1{
background-color: yellow;
}
#p2{
background-color: #ff0000;
}
#p3{
background-color: #ffaabb;
}
/*.col-md-12 .content{
margin-right: 2.5%;
margin-left: 2.5%;
*/
p.content{
border: 1px solid black;
background-color: #a3d3d3;
/*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
height: 150px;
margin-right: 5%;
margin-left: 5%;
font-family: Helvetica;
color: white;
padding: 20px;
}
p.my-title{
position: absolute;
top: 0px;
right: 0px;
width: 80px;
height: 20px;
margin: 0px;
border: 1px solid black;
text-align: center;
margin-right: 5%;/*inherit; 22.525px; inherit*/
margin-top: 16px;
/*margin-right: auto;
margin-left: auto;
font-family: Helvetica;*/
color: black;
}
/* Simple Responsive Framework. */
.row {
width: 100%;
}
/********** desktop devices only **********/
#media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
}
/********** Tablet devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
.col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-12 {
float: left;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-12 {
width: 100%;
/*margin-right: -5.5%;
margin-left: -2.8%;*/
}
}
/********** mobile devices only **********/
/* the floating is only defined inside the media queries.
The elements will behave just like regular block level elements,
and they will automatically stack one on top of the other.
Anyway, it's better to explicit define the media query also for
mobile phones. */
#media (max-width: 767px) {
.col-sd-9, .col-sd-10, .col-sd-11, .col-sd-12 {
float: left;
}
.col-sd-9 {
width: 74.99%;
}
.col-sd-10 {
width: 83.33%;
}
.col-sd-11 {
width: 91.66%;
}
.col-sd-12 {
width: 100%;
}
}
Thank you!
check this fiddle
div.anchor{
position: relative;
padding: 0 15px;
}
p.content{
border: 1px solid black;
background-color: #a3d3d3;
/*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
height: 150px;
/* margin-right: 5%;
margin-left: 5%; */
font-family: Helvetica;
color: white;
padding: 20px;
}
p.my-title{
position: absolute;
top: 16px;
right: 15px;
width: 80px;
height: 20px;
margin: 0px;
border: 1px solid black;
text-align: center;
/* margin-right: 5%;inherit; 22.525px; inherit
margin-top: 16px; */
/*margin-right: auto;
margin-left: auto;
font-family: Helvetica;*/
color: black;
}
EDITS:
removed margin left and right on p.content and p.my-title, added padding on div.anchor and top and right position on p.my-title
http://codepen.io/kjohnson/pen/azBvaE
My friend and I are thinking of using that timeline in our website. But the problem is we've 5 sections that needs to be added to timeline, whereas the original timeline have only 3 sections.
I've tried to add two more sections to that code, but it's losing its shape and responsiveness.
Is it possible to extend that timeline and maintain its responsiveness?
HTML
<!-- STEPS -->
<section id="Steps" class="steps-section">
<h2 class="steps-header">
Responsive Semantic Timeline
</h2>
<div class="steps-timeline">
<div class="steps-one">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Semantic
</h3>
<p class="steps-description">
The timeline is created using negative margins and a top border.
</p>
</div>
<div class="steps-two">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Relative
</h3>
<p class="steps-description">
All elements are positioned realtive to the parent. No absolute positioning.
</p>
</div>
<div class="steps-three">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Contained
</h3>
<p class="steps-description">
The timeline does not extend past the first and last elements.
</p>
</div>
</div><!-- /.steps-timeline -->
CSS
$outline-width: 0;
$break-point: 500px;
#import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
$gray-base: #999999;
$brand-primary: #3498DB; //Zen Blue
.section-header {
color: $brand-primary;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
#extend .section-header;
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(red, $outline-width);
#media screen and (max-width: $break-point) {
border-left: 2px solid $brand-primary;
margin-left: 25px;
}
#media screen and (min-width: $break-point) {
border-top: 2px solid $brand-primary;
padding-top: 20px;
margin-top: 40px;
margin-left: 16.65%;
margin-right: 16.65%;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.steps-one,
.steps-two,
.steps-three {
outline: 1px dashed rgba(green, $outline-width);
#media screen and (max-width: $break-point) {
margin-left: -25px;
}
#media screen and (min-width: $break-point) {
float: left;
width: 33%;
margin-top: -50px;
}
}
.steps-one,
.steps-two {
#media screen and (max-width: $break-point) {
padding-bottom: 40px;
}
}
.steps-one {
#media screen and (min-width: $break-point) {
margin-left: -16.65%;
margin-right: 16.65%;
}
}
.steps-two {
}
.steps-three {
#media screen and (max-width: $break-point) {
margin-bottom: -100%;
}
#media screen and (min-width: $break-point) {
margin-left: 16.65%;
margin-right: -16.65%;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
#media screen and (max-width: $break-point) {
float: left;
margin-right: 20px;
}
}
.steps-name,
.steps-description {
margin: 0;
}
.steps-name {
#extend .section-header;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
.steps-description {
overflow: hidden;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
If you a novice I'd recommend you LEARN first. Copy templates/snippets is good to save your time when you know what you are doing.
I found a perfect tutorial for you here
Just to emphasize that's my opinion, I hope it helps in a certain way..
EDIT: If still want to develop in that way here's a codepen snippet with a fully responsive horizontal timeline. Just have to put more <li> inside the <ul>
I'm not familiar with media queries from last 2 days I try a lot and search for several time but still I'm failed to add queries to my style sheet...
I just want to apply media queries into my css for all devices. any one can help me set the proper width and height for all div,table.
here's code
#media only screen and (min-width: 320px) and (max-width: 979px) {
html ,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
/* overflow-x: hidden;*/
text-align: right; direction: rtl;
}
body {
background:#77d5fb;
text-align: center;
font-size: 11px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
opacity: .98;
}
table.body {
width: 950px;
background: #fff;
padding: 10px;
margin-top:70px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-box-shadow:0px 0px 20px #fff;
-webkit-box-shadow:0px 0px 20px #fff;
box-shadow:0px 0px 20px #fff;
min-height:100%;
}
.container{
width:100%;
background:#fff;
min-height:100%;
position:relative;
padding-bottom:105px;
}
#footer{
background:#eee;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:171px;
position:absolute;
}
#Layer1 {
position:absolute;
position:fixed;
top:0px;
width:100%;
height:50px;
z-index:1;
padding-left:0px;
padding-right: 0px;
background: #fff;
text-align: right; direction: rtl;
}
div.content {
width: 950px;
padding: 10px 0px 20px 0px;
text-align: left;
margin-left: auto;
margin-right: auto;
min-height:100%;
}}
<div class="container">
<div id="Layer1">Top Nav</div>
<table cellpadding='0' cellspacing='0' class='body' align='center'>
<tr>
<td><div class='content'>Content here</div></td></tr></table><div id='footer'>Footer</div></div>
It's not very clear what you're after, but for obtaining the responsive design, then you should use % rather than fixed widths, ie - px.
If this isn't what you're after, please create a fiddle.
A side note - setting opacity on the body will affect all the elements that sit on top of it. It's better to use rgba on the background rather than setting opacity.
body {
/* background:#77d5fb;
opacity: .98;*/
background-color: rgba(119,213,251, .98);
text-align: center;
font-size: 11px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
You should remove the 950px, since that will go outside the container if the width of the body is less than 950px. Set these to percentages rather than fixed widths. Also there's no point in using table if you're not using them for their purpose. Use floats with % width values (if needed), rather than table.
table.body {
width: 90%; /* or 100%, depending on what you're after */
/* other css styles */
}
div.content {
width: 90%; /* or 100%, depending on what you're after */
/* other css styles */
}
You start by doing mobile first, like so:
#media (min-width: 320px) and (max-width: 560px) {
// styles here
}
#media (min-width: 768px) and (max-width: 1024px) {
// styles for that size here
}
#media (max-width: 1024px) {
// desktops
}
#media (max-width: 1200px) {
// large desktops
}
If you want orientation, then you need to do:
#media (min-device-width: XXXpx) and (max-device-width: XXXpx) and (orientation:portrait)
*/ or orientation:landscape */ {
// styles
}
Important
You need this in your header before ANY media queries will work
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
How I can set this CSS margin:
.url {
margin: 10px 0 0;
}
When screen is resized? From margin: 10px 0 0; to margin: 20px 0;
you have Several option:
1:Responsive Option:
media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in deprecated CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
#media all and (max-width: 1000px) and (min-width: 700px) {
.class {
margin:50px;
}
}
2:Using Percentage:
you can use:
.class{
margin:40%;
}
resource:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
http://css-tricks.com/css-media-queries/
Use media queries, for example to change the margin on screens smaller than 600px wide:
#media screen and (max-width: 600px) {
.url {
margin:20px 0;
}
}
Try this
.url {
margin: x% 0 0;
}
**replace x with your requirement
eg:
.url {
margin: 5% 0 0;
}
hope this helps.
There is a simple way to deal with margins when you resize the screen.
Just define your container width and set margin to auto:
.url {
width: 768px;
margin: auto;
}
The container width will be fixed and it will be on the center of the screen. Therefore the margins will be automatically adjusted to fit the rest of the screen.
try to use screen units vw
.url {
margin: 4vw;
}
for mobile first {tablets to mobile devices with min-width 320px}, you could try fixed position for the menu bar and make the centre button relative. display: flex
#media screen and (max-width: 767px) and (min-width: 320px){
.menu {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
position: fixed;
bottom: 0;
height: 5%;
width: 100%;
background-color: rgb(227, 248, 255);
border-top: 1px solid;
z-index: 0;
}
.btns {
width: 2rem;
height: 2rem;
background: none;
border: none;
font-size: 80%;
margin: 0 auto;
}
#mic {
position: relative;
bottom: 2em;
background-color: rgb(227, 248, 255);
border-radius: 50%;
padding: 10px;
border: 2px;
box-shadow: 0 8px 6px .01px;
z-index: 1;
}
<div class="background">
<div class="menu">
<button type="submit" class="btns"><i class="fas fa-home"></i></button>
<button type="submit" class="btns"><i class="fas fa-compass"></i></button>
<button type="submit" id="mic" class="btns"><i class="fas fa-microphone"></i></button>
<button type="submit" class="btns"><i class="fab fa-youtube"></i></button>
<button type="submit" class="btns"><i class="fas fa-user-circle"></i></button>
</div>
</div>
Use !important to override the the previous margin.
Eg:
#media screen and (max-width: 600px) {
.marginleftright {
margin-left: 0 !important;
margin-right:0 !important;
}}
.marginleftright{
margin-right: 10%;margin-left: 10%;
}