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.
Related
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;
}
}```
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/
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
}
}
<meta name="viewport" content="width=min-width, initial-scale=1.0">
#media (max-width: 455px) and (orientation: portrait) {
#border-search {
display: none;
}
#n-recentchanges {
visibility: hidden;
}
#n-randompage {
display: none;
}
/*sidebar appearance*/
#column-one {
background: none repeat scroll 0 0 #5B5B5B;
float: left;
text-align: center;
margin: 0 0 0 1%;
min-height: 149px;
padding: 10px 20px;
position: absolute;
font-size: 90%;
top: 5px;
height: 1px;
left: 6%;
width: 15%;
}
#n-home {
position: relative;
top: 0px;
left: -8px;
}
#n-sign-up {
position: relative;
top: 5px;
left: 0px;
}
#n-help {
position: relative;
top: 13px;
left: -4px;
}
#n-add-pix {
position: relative;
top: 19px;
left: 0px;
}
#column-content {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
margin: 0 1%;
padding: 10px;
width: 70%;
position: relative;
top: 0px;
left: -10%;
}
#button .hidetext {
background: none repeat scroll 0 0 #5B5B5B;
display: block;
color: #99D9EA;
margin: 0 1%;
position: relative;
float: right;
border: 0px;
top: 95px;
left: 53%;
}
#ca-edit {
position: relative
}
/*edit page nav*/
.top_header {
background: none repeat scroll 0 0 #5B5B5B;
display: none;
float: right;
margin: 0 1% 40px;
padding: 30px 10px;
width: 60%;
height: 60px;
position: relative;
top: -370px;
left: -10%;
}
#p-cactions {
float: left;
display: none;
}
#p-cactions li {
float: none;
font-size: 22px;
list-style: outside none none;
margin: 0 35px 0 0;
text-align: left;
position: relative;
left: 10%;
}
#p-personal {
float: left;
display: none;
}
.top_header ul {
margin: 0;
padding: 0;
}
#p-cactions {
float: left;
}
#p-personal li {
float: none;
font-size: 22px;
list-style: outside none none;
margin: 0 15px 0 0;
}
#column-content #bodyContent {
color: #7b377b;
float: left;
font-size: 115%;
margin: 15px 0 15px 50px;
width: 94%;
}
#column-one h3 {
display: none;
}
#column-one ul {
margin: 0;
}
.mw-ui-vform-field {
width: 70%;
}
/*control font size*/
#column-one li {
font-size: 18px;
list-style: outside none none;
margin: 1px 0;
text-align: center;
}
/*control special page layout*/
.mw-ui-input {
width:80%;
}
#wpLoginAttempt {
width: 70%;
}
.mw-submit {
width:70%;
}
/*control search input text color and font*/
#searchInput {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 4px solid #000000;
box-shadow: none;
position: relative;
top: -60px;
text-align: center;
left: 400%;
float: right;
color: #99D9EA;
padding: 8px;
width: 92px;
z-index: 3;
}
.rectangle-box {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
display: block;
margin: 0 1% 40px;
position: relative;
width: 60%;
height: 130px;
left: 0%;
top: 35px;
}
.rectangle-box2 {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
display: none;
margin: 0 1% 0 40px;
height: 400px;
width: 70%;
position: relative;
top: 0px;
left: -10%;
}
}
The media query I'm using only seems to be recognized by Chrome and Opera. I'm trying to get my site to resize with this media query, but when I change the browser window to that size the query doesn't take effect. What can I do to fix this? Is there a problem with my code? What could cause this to happen only in certain browsers?
Change viewport
<meta name="viewport" content="width=device-width">
As far as I have worked with media queries, I never used an and. And I'm sure the problem is caused by it. Remove it, and make it like this:
#media (min-width: 368px) {...}
The and will not come between #media and (min-width: 368px), but it will come between the two ()s ie:
#media (min-width: 368px) and (orientation: landscape) {...}
Edit:
I'm currently on mobile so sorry I can't test code. But I think the correct query is max-width, not min-width. So just replace min-width with max-width.
Mustaghees is correct. Remove that first "and".
Here's how it would look if you had an arbitrary background-color change when the browser size reaches min-width:368px:
http://codepen.io/sabaeus/pen/ZGOpPB?editors=110
The issue was fixed by changing the order of the media queries. They were blued out before in my coding panel. this went away by cutting and pasting the queries in a different order. Now the queries work in all browsers.
I am working on a website located here:
http://www.freshhealthybistro.com/temp/
I used a 960 grid, and the css for the 960 was taken from the website:
(google 960 gs because I can only post one hyperlink)
I realize that maybe I should have just avoided using the 960, but anyway... I did use it and unfortunately my website isn't uniform across browsers. The gray table underneath the slideshow (the one on the right hand side) should be extending to be the length of the slideshow so that it isn't shorter and both tables line up to be the same length. Instead, it is shorter on every browser and if I attempt to change the properties from % to px then it is still not uniform. In the firefox browser, even the table that is encasing the slideshow is drastically different than every other browser and looks like the website is broken. Here is my CSS:
#charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
background-image:url(../images/fgc_bg.png);
color: #FFFFFF;
font-family: arial,sans-serif;
}
h1 {
font-size: 24px;
color: #FFFFFF;
font-family: arial,sans-serif;
line-height: 50px;
}
#container {
position:absolute;
height: 100%;
left: 50%;
width: 1200px;
margin: 0;
margin-left: -600px;
}
#navigation {
position: float;
float: left;
background-image:url(../images/topbar.png);
width: 960px;
height: 50px;
margin-top: -825px;
margin-left: 120px;
}
#footer {
position: float;
float: left;
background-image:url(../images/topbar.png);
text-align: center;
width: 960px;
height: 50px;
margin-top: -25px;
margin-left: 120px;
}
#clearfooter {
position: float;
float: left;
width: 1200px;
height: 50px;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
z-index: 1;
float: left;
position: float;
margin-left: 1%;
margin-right: 1%;
}
.grid_1 {
width:6.333%;
}
.grid_2 {
width:14.667%;
}
.grid_3 {
margin-left: 120px;
margin-top: 30px;
width:23.0%;
}
.grid_4 {
width:31.333%;
}
.grid_5 {
width:39.667%;
}
.grid_6 {
width:48.0%;
}
.grid_7 {
margin-top: 30px;
width:50.666%;
}
.grid_8 {
width:64.667%;
}
.grid_9 {
width:73.0%;
}
.grid_10 {
margin-top: 50px;
margin-left: 120px;
width: 940px;
}
.grid_11 {
width:89.667%;
}
.grid_12 {
width:98.0%;
}
#logo {
position: float;
float: left;
background-image:url(../images/logo.png);
z-index: 100;
width: 266px;
height: 266px;
margin-top: -933px;
margin-left: 472px;
}
#content{
position: relative;
float: left;
background-image:url(../images/contentbg.png);
width: 1200px;
height: 800px;
margin: 150px 0 0 0;
z-index: -20;
}
#background {
position: relative;
float: left;
overflow: auto;
background-color:#bf6b31;
width: 100%;
height: 800px;
padding: 0;
margin: 150px 0 0 0;
z-index: -100;
}
#clearfix {
clear: both;
}
I am also having a weird problem with the slideshow. In IE6, the slideshows navigation (the 4 buttons in the bottom right hand corner) is functioning as it should. In every other browser these buttons are not functioning, and unclickable by the visitor. I don't know what the reason for this is, but I am assuming it may have something to do with the z-index. Here is the CSS file for the slideshow:
.featuredbox-wrapper{
display: none;
}
.featuredbox-wrapper,
.featuredbox{
top: 0px;
left: 0px;
width: 940px;
height: 400px;
margin-left:auto;
margin-right:auto;
position: relative;
overflow: hidden;
font-family: Verdana, Tahoma, "Lucida Sans";
font-size: 9pt;
font-weight: normal;
z-index: 10;
}
.featuredbox .description{
bottom: 55px;
left: 5px;
font-size: 16pt;
color: #FFF;
width: 500px;
height: 20px;
position: absolute;
font-style:none;
font-weight:normal;
}
.featuredbox-wrapper .navigation{
bottom:15px;
right:15px;
padding:0px;
position:absolute;
z-index: 100;
height: 20px;
width: 100px;
}
.featuredbox-wrapper .navigation ul{
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.featuredbox-wrapper .navigation li{
float: left;
height: 20px;
width: 20px;
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #FF0000;
cursor: pointer; cursor: hand;
background:transparent url(../images/inactive.png) no-repeat scroll 0 0;
}
.featuredbox-wrapper .navigation li.hover{
cursor: pointer; cursor: hand;
}
.featuredbox-wrapper .navigation li.active{
cursor: pointer; cursor: hand;
background:transparent url(../images/active.png) no-repeat scroll 0 0;
}
.featuredbox .box-slide1,
.featuredbox .box-slide2 {
position: absolute;
top: 0px;
left: 0px;
height: 300px;
width: 600px;
z-index: -1;
background: #FFF;
color: #000;
}
Thank you for the assistance. I am still learning CSS and appreciate the help with understanding where I went wrong. Uniformity between browsers is currently my major complaint area.
The main issue is that you chose to use a grid system, but then did not make your slider conform to the size it needed to be to fit the grid. The point of using a grid system is to have the uniform sizing/spacing it provides. So one answer to your dilemma is to downsize your slider images so they fit the grid.