I want to fix an issue on my homepage, whereby the first image in main top carousel does not display all the content when the screen width is between 1280px and 1700px (the left texts in blue). By using css "zoom" on <section class="rotator-section"> and setting it to 80%: #media screen and (min-width: 1280px) and (max-width: 1765px){ .rotator-section {zoom:80%;}} this mostly fixes the issue between certain widths. Unfortunately, zoom does not work at all in Firefox and produces unwanted results in IE (image stays same unwanted size and rest of window shows white space).
In order, at least, to apply a good fix to Chrome, Opera, Edge and not create unwanted results in IE, I want to apply the following #media not query so that IE 10 & 11 do not apply this css:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.rotator-section {zoom:100% !important;}
}
This is not a perfect solution. As many of my website visitors use IE11, 10 & 9 & Firefox.
What is the solution for these browsers?
There is an easier way to fix this. The positioning of the background image is being caused by one bit of CSS:
#homepage-rotator>div:nth-child(2) {
background-position: right;
}
This is forcing that image to be misaligned. Try deleting that CSS, or changing it:
#homepage-rotator>div:nth-child(2) {
background-position: left;
}
I suggest you to use different images according to screen size may help you display the image properly.
Example:
/* For devices smaller than 1200px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For devices 1200px and larger: */
#media only screen and (min-device-width: 1200px) {
body {
background-image: url('img_flowers.jpg');
}
}
Related
I have the following media queries:
#media screen and (orientation:portrait) {
.cover-image {
background-image: url("...");
}
}
#media screen and (orientation:landscape) and (max-width: 767px) {
.cover-image {
background-image: url("...");
}
}
The intent is to show a mobile-specific image if the screen is in portrait.
On initially loading the page in IE11 or Edge, orientation:portrait rule is applied and the image intended for mobile loads. On a subsequent refresh, via the button or F5, the orientation:landscape rule is applied instead and the proper image loads.
Attempted summary: IE/Edge thinks it's in portrait mode for the initial load, landscape mode for any reloads.
I know it's been said many times, in many ways, but what is IE doing? And why is it doing it?
Thanks.
EDIT: better explanation of CSS.
I know can get a style for IE only using this CSS:
#media all and (-ms-high-contrast:none) {
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: green } /* IE11 */
}
and can make a site responsive using media queries:
#media only screen and (max-width: 800px) {
.foo { color: green }
}
How do I write the code to make a style for IE only at a certain screen size? Neither of the following is working for me, IE is just ignoring this style:
#media only screen and (-ms-high-contrast:none) and (max-width: 800px)
#media all and (-ms-high-contrast:none) and (max-width: 800px)
Thoughts?
IE, Safari, chrome & google. For some reason when I use flexbox my divs/columns take up more space on IE than the 3 other major browsers. So I have to specify a flex of 0 0 23% on IE if I want to 4 columns to fit on a page, otherwise the 4th column drops down below the other 3.
Then, when the browser size decreases (eg < 1000px), and I want it to be a 2-column layout, I would have to specify a flex of 0 0 48% on IE (with a flex of 0 0 50% everywhere else).
However, I don't know how to specify a 2 column layout of 48% for an IE screen of <1000px (while keeping it 50% on the other browsers).
Hopefully that makes sense.
Unless there's something I'm missing. I'm relatively new to flexbox so that's possible.
My CSS media query specifies a pixel range of 480-850px, but in Chrome it's kicking in from 528px-935px instead. I'm measuring pixels with chrome developer tools. I thought it might be zoom or something but zoom is set to 100%.
#media screen and (min-width: 480px) and (max-width: 850px){
#main-nav {
display: none;
}
}
Any ideas what is going on here? This media query works perfectly in Safari. Thanks for any advice.
ISSUE SUMMARY:
Hi,
I just purchased Jomsocial + Template Socialize. I use RSForm for my landing page.
I have an image on left and the form on the right side on desktop view.
When I reduce browser to simulate Responsive view, the text come under image but has a width of 50%. This is the width necessary for destopview.
So I add some lines in /templates/socialize/css/template.css
#media (max-width: 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
BUT it doesn't work. width stay 50% instead of 100%. I tried with Chrome & Firefox.
Please see screenshot for better understanding.
Someone has an idea how to fix that?
Try this
#media only screen and (max-width : 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
I think the underlying issue is using max-device-width vs plain old max-width. Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
#media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
#media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. This will work on desktops when the window is narrowed. */
}
I have a website where a media query decides whether to show the right-hand column, depending on browser width. CSS looks like this:
#media only screen and (max-width: 1152px) {
#column_right {display:none}
}
Recently, I was testing this on a Windows box where the DPI scaling is set to 125%. The resolution of the monitor is set to 1024x768. So in theory, because there are only 1024 CSS pixels available, I assume this would match the media query.
However, this is not the behavior that occurs! It seems that the media query looks not at the CSS pixels, but at device pixels, of which there are 1280 (1024 x 125%). This occurs only in Firefox so far, because Firefox uses the device pixel ratio set by Windows, while all the other browsers (including, bizarrely, Internet Explorer) use a default device pixel ratio of 1.0. I say that this is bizarre of IE because if there is one browser that should respect Windows settings, it is IE.
Anyway, why is it this way, and how would I work around it?
You could use max-device-width to hide the column if the screen resolution is below a certain width.
This example below would trigger the display: none media query if the screen resolution is up to 1024px wide. Above 1024px gets a green div.
div {
background: #F00;
width: 100px;
height: 100px;
}
#media screen and (max-device-width: 1024px) {
div {
display: none;
}
}
#media screen and (min-device-width: 1024px) {
div {
background: green;
}
}
<div></div>