I'm familiar with responsive design + CSS.
But for some odd reason the only media query that isn't working is the mobile dimension style.
I'm using chrome to monitor what style is being applied and it only loads the min-device-width styles only.
Does anyone know why this is happening?
I also have the below in my index file.
UPDATED
<link href="styles.css" rel="stylesheet" type="text/css">
#media (max-device-width: 480px){
/* Styles */
#profilebody_avatar
{
width: 10em;
}
.profilebody_name{
font-size: 90%;
font-weight: 500;
position: relative;
text-shadow: 0 0 2pt #000;
}
}
#media (min-device-width: 1024px){
#profilebody_avatar
{
width: 20em;
}
.profilebody_name{
font-size: 90%;
font-weight: 500;
position: relative;
text-shadow: 0 0 2pt #000;
}
}
"Your rule says max-device-width not max-width, which means, as long as your monitor is wider than 480px, you're not going to see anything different. Either check on a small screen or update it to max-width for Responsive Design rather than Adaptive."
You can use Chrome to pretend change the "device width" by pulling up the Inspector (right-click and Inspect Element) then click on "Show Console" button in top right (looks like a > with three horizontal lines next to it) click on Emulation tab, and then choose a Device to emulate (pick iPhone 4, it has a max-width of 320 [well, 640 but with a font-scale factor of 2, which is 320.]) Then hit Emulate and it will update the "device width".
I.E.:
Your max-device-width is the width of your monitor, not browser window. So, mine is 1920px. It won't change unless I change my monitor's resolution.
Your max-width is the width of your browser window. That, unlike the above, does change on resize.
Related
I'm trying to get a button to have a responsive width based on the screen size. I've got it so it works perfectly when I resize a regular Chrome window, but when I toggle the display to mimic a device (any mobile device/ipad/etc.) the width of the button immediately gets much smaller. It looks the same even when I open it on my iPhone, so it's not just some weird issue with Chrome's tools. When I inspect the element, I can see that width has been disabled:
I thought there might be some CSS overriding it, but then that doesn't explain why this behavior disappears entirely when I'm simply resizing Chrome or even picking one of the devices with wider resolutions than any of my rules. I have still tried removing all of my #media rules and the behavior persists.
The button is pretty basic HTML, and it's not even wrapped up in a div that could be causing the issue (unless the fact that there's a flex box right under it could be a problem?):
<body>
<button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>
And all of the relevant CSS is here:
#ranking-button {
position: fixed;
top: 0;
right: 0;
margin: 20px;
font-family: 'Black Han Sans', sans-serif;
font-size: 24px;
color: black;
background-color: #ffcc00;
width: 40%;
height: 60px;
cursor: pointer;
border: 0em;
}
#ranking-button:hover {
background-color: black;
color: white;
}
button:focus{
outline: none;
}
#media (min-width: 600px) {
#ranking-button {
width: 200px;
}
}
I've also tried adding !important to it, and it then did work for mobile - but then stopped changing for any other resolution and was stuck at 40% all the time.
I'd given up on this minor side project, and then randomly realized what I'd done wrong while doing something completely different - in case anyone makes the same mistake as me, I'd managed to forget to set the viewport. Adding this made the CSS work:
<meta name=viewport content="width=device-width, initial-scale=1">
When you use a #media query, it does anything inside it when the 'rules' inside the brackets are accepted.
So, if you say that max-width:1000px then, if your browser is 600px then anything inside it will apply, if not, then it will be ignored.
For screens smaller than 600px, your normal #media css rule will be accepted and there you said width:40%, and you can't measure in %.
#media only screen and (max-width: 600px) {
#ranking-button {
width: 200px;
}
}
I'm coding for a responsive website using basic CSS and HTML(without bootstrap).
now I wanna change the size of elements(caption font, picture size, etc) to be set up for size of various devices.
for example I have codes like below:
.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;}
and want to reduce 10% of sizes by a code to have sth like:
.footer-link{
font-size: 12px;
width: 72%;
padding-bottom: 18px;}
I know about media . but with that I still need to rewrite every single code and size in each media! Actually i want to avoid rewriting by having some especial code that reduces all sizes in a media itself alone.
but I don't have any idea of doing this.
any recommendation please?
you can add #media query in css and add the max width in which the inner code will be vaild. for example:
#media (max-width: 600px) {
.footer-link{
font-size: 12px;
width: 72%;
padding-bottom: 18px;}
}
now only when the device have maximum width of 600px this code will be executed.
Also you can change the size to make it em,rem, vw, vh, % instead of normal px preoperty to make it more dynamic.
you can read more about how to make responsive website from here
Here is an example for a small device:
.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;
}
#media (min-width: 576px) {
.footer-link{
font-size: 12px;
width: 72%;
padding-bottom: 18px;}
}
to do other sizes you just create a new media query and change the size, bootstrap 4's breakpoints look like this:
xs = Extra small <576px.
sm = Small ≥576px.
md = Medium ≥768px.
lg = Large ≥992px.
xl = Extra large ≥1200px.
Three methods:
ONE:
1) Use the rem scaling measurement
Do NOT use px, instead use the rem scaling measurement. rem is Root em and everything works from this :root value, this hiarachy is critical for step 2:
2) Use #media queries to control the root-em size
Once set, you can run a media query simply controlling the root-em (rem) value for each of your #media queries.
Example:
:root {
font-size: 16px; /* this sets 1rem */
}
.footer-link{
font-size: 0.9rem; /* 16 x 0.9 */
width: 5rem;
padding-bottom: calc(100% - 5rem);
}
#media screen and (max-width:500px){
:root {
/* Everything is magically a bit smaller */
font-size: 14px;
}
}
NOTE: Setting font-size: in the html{ ... } can maybe overwrite the browser font-size setting (unconfirmed by me).
TWO:
Using ONE above but also with CSS Variables for ease of adjustment.
Exampe:
:root {
/* percentage */
--widthValue: 80%;
font-size: 16px; /* this is still needed as sets 1rem */
}
.footer-link{
font-size: 1rem;
width: var(--widthValue);
padding-bottom: calc(100% - var(--widthValue));
}
#media screen and (max-width:500px){
:root {
/* Everything is magically a bit smaller */
font-size: 15px;
--widthValue: 76%;
}
}
This allows you to fine tweak adjustments that can not easily be scoped by rem values. Read more here.
THREE:
There was a third method in my mind when I started writing this answer but I think the two above should between them more than easily cover what you're looking for.
I know about media . but I still need to rewrite every single code and size in each media
Yes, you will need to update your basic CSS as written in your question, but that's inevitable as you're replacing static code with varaible driven code.
The solution I present is Dont Repeat Yourself (huh?) -- you only need to change one value in the #media query and all the styles cascade from that one simple change.
The sample code you provided is not a sample of responsive website. To be responsive we have to redesign and reorder elements. Some elements like images and backgrounds may need to be resized but the fonts, widths and paddings etc. should not be smaller when the screen is smaller. For example if you reduce the width of elements when the window is smaller in a small window you have nothing rather than elements with width:1% !
So I think you need a kind of ZOOM which may be appropraite for games and somethings special.
Besides without using CSS media queries and without rewriting css rules, the only way to zoom everything is JS codes. So I write simple sample to show how you can zoom everything according to the window size.
Please try resizing the window to check the effect:
var myDesignWidth=500; //this is the initial width which you design everything
$(window).on("load resize",function(){
var newZoom=$(window).width() / myDesignWidth;
$("body").css({"zoom":newZoom});
})
.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;
display:inline-block;
background:url('https://d1o2pwfline4gu.cloudfront.net/m/t/13116/13106367/a-0270.jpg');
background-size:cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="footer-link">This is a footer link with background</a>
This is the third time I have faced this problem.
I don't know what is wrong.
Here are two pictures of how it looks like:
On desktops:
On mobile devices:
As you can see on mobile devices text is not aligned center vertically.
Again this problem is only visible on mobile devices.
What is the problem? What did I miss? This problem is also visible in inputs.
I am using the following code for the buttons:
.button
font-family: 'Gotham Pro', sans-serif
font-size: 14px
color: $color-text--button
padding: 10px 15px
text-transform: uppercase
background: $color-button--default
border: 1px solid $color-transparent
Please note, I use padding for setting height of buttons
UPDATE
I have just tested in mobile android Firefox browser, everything works just fine the issue only with Chrome
There is no line-height specified in your code.
Try setting a specific line-height. In addition I suggest, that you center your text via line-height and not via padding. Set a line-height with the same height the button has.
CSS
.button {
height: 40px;
line-height: 40px;
}
This works of course only for single line texts.
Also have a look at this SO question
Did you specify a media query SPECIFICALLY for mobile?
You may need to add
// you can use any other value of screen width mobiles use like 640, 768
#media (max-width:480px){
line-height: 15px; // The line height you want to show on mobile
}
Not all browsers have a default. Almost always I make a habit of setting styles on the body element
body{
font-size: 100%;
line-height: 1.333%;
}
to take care of things like this.
I had to work with a fancy font today and I noticed that it has different line-height rendering on chrome mobile device and chrome desktop mobile emulator (devtools). Which is apparently a bug to be reported for either dekstop either mobile chrome. Changing line-heights is the option to fix but cumbersome if you have many elements. After some digging I figured out this properties
ascent-override: 92%; /* play with values */
descent-override: 10%; /* one might not be needed */
Futhermore as I needed font change for mobile chrome only I tried media query and it worked.
#media (max-width: 1000px) {
#font-face{
font-family:'FancyFont';
src:url('fonts/FancyFont.ttf');
font-weight:400;
ascent-override: 92%;
}
}
So I've started using Boostrapp and imideately i tried it on my large screen and it looks like it's zoomed out. On tablet and lap top it's fine resolution 1280 but on 1960 it's just zoomed out.
Before using boottrap i solved this problem with em units and just making font size larger for example 105% for media screen 1600, 110% for media screen 1900. And all my buttons, forms, headers adjust. But that doesn't work in bootstrap.
So my question is how do people handle large screens with bootstrap without writing 1000 lines of code for each screen size.
Use the grid system to your advantage
https://getbootstrap.com/examples/grid/
Here's how they do it: they make your own media queries on top of any frameworks they may have.
You can view my website as an example: calumchilds.com. I use the vw measurements, which means once the screen width exceeds a certain width (on my site, I set it to 2100px - the code is at the end of the answer if you are interested), the text sizes are based on the viewport width, using the measurement vw. For example, my <h2> is normally 32px on a normal-sized screen, but on large screens, the text size is 4vw. You can use the vw measurement for buttons, forms, whatever.
Just experiment with the sizes using either your own screen or Google Chrome Dev Tools (I used the latter.) If you have any questions, feel free to comment below.
#media screen and (min-width: 2100px) {
h1 {
font-size: 5vw !important;
}
h2 {
font-size: 4vw !important;
}
h3 {
font-size: 3vw !important;
}
h4 {
font-size: 2vw !important;
}
h5 {
font-size: 1vw !important;
}
h6 {
font-size: 0.5vw !important;
}
body, p, button, .button, .topnav a, label, input, textarea, .socialmediaprofiles a, .social-media {
font-size: 1.75vw !important;
}
.topnav a {
padding: 16% 32%;
}
button, .button {
padding: 0.5em 1em !important;
border-width: 0.2vw !important;
}
}
Bootstrap already added media queries inside the library. To get it work follow the bootstrap guide. Like use the proper grid class for each container (col-lg-12, col-md-12, col-sm-12). For each UI elements Bootstrap has proper style class. For any change if you want to modify anything, try to create some file like bootstrap.override.css to override the css class or styles. Finally better to start with reading the bootstrap guideline.
I was hoping someone could help. I was having an alignment problem with a responsive website I was building when altering the orientation. So I used the following css to try to fix my web page. The odd thing is that it is having the effect of shrinking some other images elsewhere in the website so that they get progressively smaller each time I alter the orientation relative to the fixed width object next to them which stays the same size. The changing images in question have different css tags to the ones in the code below but have % sizes. When I remove the CSS code below the strange behaviour stops.
The 4 objects in questions are divs connected to apache wickets. They sit in a page which is divided into 3 areas with tables (don't ask.) The other two areas have fixed width objects which are unaffected.
This unexpected thing happens on my iPad but not my android tablet. On the iPad it happens in both Safari and Chrome. I could probably fix it by giving fixed sizes to iPad objects in CSS, but I'd rather understand what's happening. Here's the CSS
#media screen and (orientation:landscape)
#Button1 {
clear:left;
float:left;
width:380%;
padding-top:0%;
padding-bottom: 0%;
padding-left:20%;
min-width:220%; }
}
#media screen and (orientation:landscape) {
#Value1 {
clear:left;
float:left;
padding-left:20%;
font-size: 520%;
font-family:"Times New Roman", Times, serif;
font-style: normal;
line-height: normal;
color:#CF3;
}
}
#media screen and (orientation:landscape) {
#Button2 {
clear:left;
float:left;
width:380%;
padding-top:5%;
min-width:220%;
padding-left:20%;
}
}
#media screen and (orientation:landscape) {
.symbol {
font-size: 320%;
color: #FFF;
}
}
Corresponding entries for portrait followed, so that there were options for portrait and browser mode. If anyone can explain this behaviour I'd be most interested and grateful. To re-iterate, images in another part of the site are affected when I change their orientation, and only on iPad. The images that are the target of this CSS are behaving exactly as they are supposed to, on all platforms.