I'm trying to make my website automatically adjust its content to screen size so if I enter the site from an iPhone or similar the layout should change.
#media (max-width: 600px) {
.logo {
font-size: 30px;
text-align: center;
}
.nav {
text-align: center;
font-size: 35px;
}
}
When I enter the page on google chrome on my computer the content changes as it should when I reduce the chrome window, but when I enter it from my iPhone 5 the page changes its content according this:
#media (min-width: 800px) {
.nav {
text-align: right;
margin-top: -30px;
margin-right: 20px;
}
.logo {
padding-top: 17px;
padding-bottom: 0;
}
}
Am I using the #media wrong or why doesn't the page adjust to my first piece of code when I enter it from my iPhone?
CSS
Try using Device width
#media only screen
and (min-device-width : 800px)
{
.nav {
text-align: right;
margin-top: -30px;
margin-right: 20px;
}
.logo {
padding-top: 17px;
padding-bottom: 0;
}
}
Related
(some background, I'm a designer who's trying to learn how to code!)
I'm having trouble fixing the search input field surrounding area for mobile for https://www.agjeans.com. It's cut off at the top in mobile view. While in Chrome dev tools, I'm able to seemingly fix the issue, the reality is that when I input these code changes they seem to do nothing.
I've done a variety of code changes, such as
#media only screen and (max-width: 768px)
.header-search .mobile-search-active+.search-wrapper {
padding-bottom: 72px;
border: 0;
margin-top: 30px;
}
and have done
#media only screen and (max-width: 768px) {
.search-wrapper {
margin-top: 30px !important;
}
}
and also
.search-button-container.mobile-search-active {
margin-top: 30px;
}
As you can see, these resulting changes look great in dev tools, but do nothing when actually implementing the code. I've looked at the site on my own personal phone as well as in the browser, so the issue remains persistent.
Also, if I add something ridiculous (like specifying 300px margin-top for the header) it does show in the site, so I know it's just with this issue. What's the correct solution?
All this is done in the style.min.css file. This animation is the result of all the steps below - https://ibb.co/zJWnLbf.
Initially your selector #media only screen and (max-width: 768px) .header-search .mobile-search-active + .search-wrapper looks like this:
#media only screen and (max-width: 768px) {
.header-search .mobile-search-active + .search-wrapper {
padding-bottom: 72px;
border: 0;
}
}
You need to add a top: -37px. And now this selector should look like this:
#media only screen and (max-width: 768px) {
.header-search .mobile-search-active + .search-wrapper {
padding-bottom: 72px;
border: 0;
top: -37px;
}
}
Ok, now we need to correct the closing cross. To do this, you need to turn to the selector #media only screen and (max-width: 480px) and (min-width: 320px) .header-search .search-button.active looks like this:
#media only screen and (max-width: 480px) and (min-width: 320px) {
.header-search .search-button.active {
background: url(../images/close-x-button.svg) no-repeat;
background-size: 15px auto;
z-index: 2;
left: 10px;
top: -32px;
width: 15px;
height: 15px;
border: none;
padding: 0;
}
}
You need to add a top: 10px and remoeve a top: -32px. And now this selector should look like this:
#media only screen and (max-width: 480px) and (min-width: 320px) {
.header-search .search-button.active {
background: url(../images/close-x-button.svg) no-repeat;
background-size: 15px auto;
z-index: 2;
left: 10px;
top: 10px;
width: 15px;
height: 15px;
border: none;
padding: 0;
}
}
And the same top: 10px rule needs to be added for the #media only screen and (max-width: 768px) and (min-width: 370px) .header-search .search-button.active selector. As a result, it should look like this:
#media only screen and (max-width: 768px) and (min-width: 370px) {
.header-search .search-button.active {
background: url(../images/close-x-button.svg) no-repeat;
background-size: 15px auto;
z-index: 2;
top: 10px;
left: 20px;
width: 15px;
height: 15px;
border: none;
padding: 0;
}
}
I am trying to make the telephone button responsive on mobile.
In my browser's developer tools everything seems good in every mobile screen resolution, but when I access the site from mobile the phone number is split into 2 lines, instead of making it one line in a box.
Example
html
050-475-1410
css :
* {
margin: 0;
padding: 0;
}
body {
overflow: scroll;
margin: 0;
font-size: 17px;
color: black;
line-height: 1.4;
}
#media only screen and (max-width: 2000px) {
.call {
/*Your styles on small screen - example only*/
width: 200px;
font-size: 30px;
.span{display: inline;}
}
}
#media only screen and (max-width: 600px) {
.call {
/*Your styles on small screen - example only*/
width: 150px;
font-size: 25px;
.span{display: inline;}
}
}
#media only screen and (max-width: 370px) {
.call {
/*Your styles on small screen - example only*/
width: 125px;
font-size: 20px;
.span{display: inline;}
}
}
#media only screen and (max-width: 330px) {
.call {
/*Your styles on small screen - example only*/
width: 120px;
font-size: 20px;
.span{display: inline;}
}
}
.call {
color: #2c3e50;
background: none;
border: 1px solid #2c3e50;
text-align: center ;
padding: 10px, 20px;
margin: 5px;
font-family: font1;
text-decoration: none;
position: relative;
cursor: pointer;
top: 2px;
}
HTML treats hyphen text as words, that's why they break down on small screen.
use white-space: nowrap;
also you can use these hyphen uni-codes ‑ or ‑
I want to create div in html with images and texx, but It should appears only on mobile version, how i can make this ?
Here is some code.
/*-- Mobile Design---- */
#media (min-width: 320px) and (max-width: 767px) {
/* put your css styles in here */
html,
body {
margin-top: 0;
margin-bottom: 0;
}
a.navbar-brand img {
padding: 0;
display: flex;
margin-left: 10px;
margin-right: auto;
width: 95%;
max-width: 200px;
}
.header {
height: 15%;
}
.navbar-toggler i {
font-size: 22px;
margin-right: 10px;
}
Hide the element by default and only show it when it fits your contraints. For example:
.yourElement {
display: none;
}
#media (min-width: 320px) and (max-width: 767px) {
.yourElement {
display: block;
}
}
I have created several #media Queries to try and capture different displays. Im using chrome developer tool and whenever I switch the size of display it defaults to whatevere media query is lowest in the css. My original solution to this was putting the smallest down bellow, but now when i test it with my monitor it says 1440px is being used instead of 1920px. So i solved my issue when it comes to Mobile devices but have recreated it with monitors. How can I get around this issue?
2286BowmanRoad.com
CSS sample Bellow it is replicated from high to low and consist of
Bottom -> Top 360, 375, 450, 680, 780, 1054, 1366, 1440, 1680, 1920, 2560, 3840
/* Start of Media only <1920 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1920px) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 1.5em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1920 -------------------------------------------------------------------------------------------------------------------------- */
/* Start of Media only <1680 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1680) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 2em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1680 -------------------------------------------------------------------------------------------------------------------------- */
/* Start of Media only <1440 -------------------------------------------------------------------------------------------------------------------------- */
#media only screen and (max-width: 1440px) {
.fancyText { font-size: 2em; }
.smallerHeadline { font-size: 1.3em; }
.content {border-top:8px; margin: 0px; padding: 0px; width: 100%; } .footer { font-size: 0.8em; float: left; width: 100%; margin: 0px; padding-top: 35px; padding-bottom: 35px; letter-spacing: 1pt; }
.headline { letter-spacing: 0pt; font-size: 2em; }
.Wrap { max-width:1050px; padding-top: 15px; padding-bottom: 15px; }
.imageHeader { font-size: 1.5em; }
}
/* End of Media only <1440 -------------------------------------------------------------------------------------------------------------------------- */
You structured your media queries incorrectly. You can either group all of your css that corresponds to each view port or you can target media queries on individual classes. Here is a guideline to see an example of properly structuring and the sequence.
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
#media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
#media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
#media (max-width: 1199.98px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
For future reference, please give more details about your problem. It would be much more helpful if you were able to share the CSS code that is not working so we can work with you to resolve the issue.
My first instinct is that you're not using media queries correctly, here's a couple examples for you to look at:
#media only screen and (min-device-width: 960px) {
#wrapper { width: 70%; }
}
#media only screen and (max-device-width: 960px) {
#wrapper { width: 100%; }
}
The first media query will activate for any device where the screen width is bigger or equal to 960px and the second media query will activate when the screen width is smaller or equal to 960px.
If you can, please update your post with more details about specifically what is working and some example CSS so we can help you resolve your problem.
I know a decent amount of HTML, CSS, Jquery, and PHP. But when it comes to making a responsive web page I'm really new to it. So basically in my basic web page called 'colors.html' i have 4 divs. The 4 colors are yellow, blue, red, and green. So understanding what a responsive web page is supposed to be i did all my positioning and heights and widths in %'s. All my positioning is placed within a body that is relative, and all the elements inside it are absolute. It looks like it works fine, and i set a min-width to the all the divs so that when a user resizes the browser window it doesn't all scramble together. Am i doing this correctly or is there a much better way to do this?
<!doctype html>
<html>
<head>
<title> Test </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="colors.css">
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="yellow"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$('#red').click(function() {
alert('Red');
})
$('#green').click(function() {
alert('Green');
})
$('#blue').click(function() {
alert('Blue');
})
$('#yellow').click(function() {
alert('Yellow');
})
</script>
</body>
</html>
body {
margin: 0;
position: relative;
}
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
#yellow {
position: absolute;
width: 20%;
height: 10%;
background-color: yellow;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 20%;
min-width: 150px;
}
#red {
position: absolute;
width: 20%;
height: 10%;
background-color: red;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
right: 3%;
top: 5%;
min-width: 150px;
}
#green {
position: absolute;
width: 20%;
height: 10%;
background-color: green;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
right: 3%;
top: 20%;
min-width: 150px;
}
You can use Media Rule to make responsive for each resolutions... it may be a litte bit too much work. but it will do work for u...
for example:
make new .css file call it whatever u want to. responsive.css
You will use all your tagst (div, ul, li, etc)... include it in ur html file in to tag...
well, for ecample you have:
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
in Media Rule tag it will look like:
#media screen and (max-width: 699px) and (min-width: 520px) {
#blue {
position: absolute;
width: 20%;
height: 10%;
background-color: blue;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto;
cursor: pointer;
border-radius: 5px;
left: 3%;
top: 5%;
min-width: 150px;
}
#red {
}
.div {
}
}
#media screen and (max-width: 1000px) and (min-width: 700px) {
}
so u have to do it for each tag... dor a desctop, table, phone screen.
#media screen and (max-width: 1680px){
}
#media screen and (max-width: 1600px) {
}
#media screen and (max-width: 1440px) {
}
#media screen and (max-width: 1400px) {
}
#media screen and (max-width: 1366px) {
}
#media screen and (max-width: 1360px) {
}
#media screen and (max-width: 1280px) {
}
#media screen and (max-width: 1152px) {
}
#media screen and (max-width: 1024px) {
}
until 480px or lower. i don't know how small screen do u need.
Hope this will help you :)
The biggest problem of your concept, in my opinion, is that position: absolute is commonly used to render items out of the normal flow of the page. They are rendered above the page. This is how you place a drop-down menu, a tooltip, a modal window, a drawer that slides over the content or a mega-menu.
Placing all your content outside the normal flow just because you can is not particularly useful, since you don't actually need the functionality of placing elements outside the flow. You don't have a flow!.
When you start thinking about a layout you shouldn't think about CSS at all. All you should ask yourself is: how will my page be rendered on different sizes and proportions of screens?:
huge screens, with width so big all your paragraphs would be rendered as 1 liners (> 75em)
large screens: desktops, large laptops (62em > 74.9em)
medium devices: laptops/tablets (48em > 61.9em)
small devices most smartphones, tablets (34em > 47.9em)
very small screens (up to 33.9em)
After you come up with some display rules for various screen sizes and proportions, you should write them in order, from small to large or from large to small:
Example (large to small):
// CSS for very large screens
#media (max-height: 74.9em) {
// CSS overrides for large screens
}
#media (max-height: 61.9em) {
// CSS overrides for medium screens
}
#media (max-height: 47.9em) {
// CSS overrides for small screens
}
#media (max-height: 33.9em) {
// CSS overrides for very small screens
}
Another good practice is to aim to write as little code as possible. For example, instead of writing the same properties for each color, like you did, it would be better to make a class that holds all the common properties of your colors and apply it to all color divs.
.color {
position: absolute;
width: 20%;
color: white;
text-align: center;
font-size: 150%;
font-family: Roboto, sans-serif;
cursor: pointer;
border-radius: 5px;
min-width: 150px;
}
and than write in each #{color} {...} the specific properties for that particular div.
Keep in mind that, before using it, you should load a font-family, like Roboto to make sure it renders on all devices even if it's not installed.
#import url(https://fonts.googleapis.com/css?family=Roboto);
You should also specify a generic font-family type, just in case there is an error downloading the font file, so the browser renders the page as close to the original as possible.
Other than that, the only advice I have is: always test your CSS on all screen sizes and in at least 3 major browsers before going live.
Best of luck!
Good luck!