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.
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;
}
}
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%;
}
}
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.
I have just started bootstraps & i have faced a problem.....!
I have an h1 tag at the top of my site. I design it up and check it out in a browser – looks great. Then I shrink it down to a mobile width, and the font is way too big! Here’s the thinking behind mobile first: how to small the same tag font in a mobile.
Use media queries.
#media (max-width: 480px) {
h1{
font-size: 14px; /* or anything you want */
}
}
Another possibility is to use a JavaScript library for responsive typefaces:
FlowType.js
FitText.js
I'm having a weird issue here.
Codepen: http://codepen.io/anon/pen/yFbAs
When resized above 979px, the navigation menu ('#nav' div) should appear inline with the div '#logo', vertically in the middle of it. This appears fine when the page is first loaded. (codepen will default to the <979px though so you wont get to see that unless you try it yourself)
When resized to >979px, the '#nav' div is on a new line, as if it or '#logo' is not reset back to an inline-block but is instead appearing to stay as a 'block' element. However, when I check what's going on with the chrome developer tools it appears that it has properly reset back to 'inline-block'. Is the issue with my design?
Any insight is greatly appreciated!
Thanks
Try this edit to your css
http://codepen.io/anon/pen/vHypu
#header {
font-family: 'Montserrat', sans-serif;
padding:5px;
clear:both;
}
#header #logo {
float:left;
font-family: Georgia;
font-size:3em;
font-style: italic;
}
#media only screen and (min-width: 650px) and (max-width: 979px) {
#header #logo {
display:block;
text-align:center;
float:none;
}
It looks like a rendering bug in chrome, as it does not happen on Firefox,
The way around it would be to float the logo left too
Here is a working edited pen http://codepen.io/anon/pen/ovBge