Basically, using bootstrap 4, i'm trying to take the bootstrap class "custom-select" and override some of the bootstrap elements for my own uses. Here's the html and scss im using. Pretty simple stuff imo.
<select className="custom-select" id='sortingSelect' onChange={(e) => setSortingOption(e.target.value)}>
<option defaultValue value ="0">Random</option>
<option value="1">A - Z</option>
<option value="2">Z - A</option>
</select>
.custom-select#sortingSelect{
width: 5% !important;
float: right !important;
margin-right:5% !important;
}
It straight up would not work when i put it in the "module.scss" for that page i was working on, so i ended up having to put it into my custom.scss that globally overrides stuff. Even when using !important tags, it still wouldn't work in my module.scss, but it does work with my custom.scss. That's problem solved, well, kind of.
Because! I want it to also be able to change with screen size, this is bootstrap after all. So i put the following into my custom.scss
#media (max-width: 768px) {
.custom-select#sortingSelect{
float: none !important;
display: block !important;
margin: 0 auto !important;
}
}
It doesn't even seem to recognize this input at all for some reason :/
Are media queries simply just not allowed in the custom.scss file? If that's the case am i just boned? Or am i just going about this all wrong? It could be some issue with specificity, but how the heck do i get more specific than what ive already got?
Please lemme know if i need to provide more context!
Also! I read that i need to include the following code in my html
<meta content="width=device-width, initial-scale=1" name="viewport" />
However, i am using React, so i included it in the html that is returned from my Layout component that renders everything else, still no luck, and that wouldn't make sense as the problem anyhow, because media queries have worked before in that very same file, just not with overriding bootstrap stuff. Overriding bootstrap stuff always seems to be way more difficult than it needs to be in my experience so far.
Edit: I tried using bootstraps built in break points, but that failed as well
Why are you using both class and ID at the same time in your CSS file.
Either use className or Id for CSS.
Like:
.custom-select{
width: 5% !important;
float: right !important;
margin-right:5% !important;
}
OR
#sortingSelect{
Height: 5% !important;
float: left !important;
margin-left: 5% !important;
}
I apologize if this question is super simple. I have been trying to use a third party website builder for a client for ease of access/editing later on but he really wants a responsive site that resizes and centers itself no matter what browser/resolution it's displayed on. I am pretty sure I will need to just start from scratch and build him something completely customized. I'm struggling to even know where to start with this as coding responsive sites is still new to me. Any help or guides that someone could point me to would be greatly appreciated.
#page {
margin-left:auto;
margin-right:auto;
width:960px;
}
#stage {
margin: 1em auto;
width: 360px;
height: 540px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 0px;
border: 0px solid #ccc;
background: #fff;
}
Do you want the body to be always centered so it doesn't have layout problems on different devices or do you want every element to be center aligned?
I think it's the first one.
You could use width:95vw; on the body element and margin:auto;.
You could work with media queries.
It's also important to add the viewport meta tag in the head.
Let me know if I understood the question
UPDATE 12/2020: Seeing as this post still gets activity, I must stress that there are no answers here that apply to modern web development. In fact, almost all of the answers here would put your website in a precarious situation when it comes to accommodating those with disabilities. The only thing your responsive website should include in the head tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Much more than just UX is at risk if you attempt to lock users into a specific scale (such as lawsuits or even government fines).
-- CONTINUE AT YOUR OWN RISK --
UPDATE 03/2019: This Q&A still gets some activity, nearly 5 years my question came up. Please note this problem was due in part to more common irregularities in older mobile devices at THAT time. With today's browsers and devices, fiddling with viewport scalability would be a shoe-horn fix to a bigger problem which is likely a problem in either your CSS or possibly your markup.
I've built a dozen responsive sites and have never experienced this problem. Basically, I'm using the meta tag for viewport with width=device-width, but iPhone and Android devices are still zooming. For some reason, I don't have this problem on Windows phones.
Here is an excerpt from the head html:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Here is the HTML for the main wrappers (note the outermost div is added from jquery.mobile:
<body class="html front logged-in no-sidebars page-node mobile-detect-class ismobiledevice" >
<div data-role="page" data-url="/?mobile_switch=mobile" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 568px;">
<div class="container">
</div>
</div>
</body>
And here is the main wrapper CSS:
html,body { margin: 0; padding: 0; background-color: #d5d5d5; font-family: 'HelveticaNue', Arial; }
body {background: transparent none no-repeat 50% 0; min-height:100%; height:auto; background-size: auto 100%; width:auto;}
body > div {width: 100%; height: auto; }
.container { background: #fff none no-repeat 50% 0; margin-bottom: 20px; width:100%; position:relative;}
Bootstrap is also being loaded prior to the stylesheet.
I have tried a number of different things already including:
Removing jquery.mobile
Removing bootstrap
Updating bootstrap to the latest version
Changing the viewport tag to the following:
width=device-width, initial-scale=1.0
width=device-width, initial-scale=1.0, user-scalable=no
width=device-width, initial-scale=1.0, user-scalable=0
width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0
Adjusting various CSS properties related to width/max-width
I am completely out of ideas and seem to have exhausted anything new I can find / try via google. I would greatly appreciate any help you can provide!
After much testing and continued searching, I came up with a fix that seems to be very effective. Another solution I saw to a similar problem proposed the following:
<meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />
This, at first, seemed like a decent solution as it worked on most phones. It bugged me a little bit though because it obviously isn't geared specifically towards working with any device width. That answer can be found here:
Android viewport setting "user-scalable=no" breaks width / zoom level of viewport
This solution worked on most mobile devices, but on some it was ineffective causing the display to be using incorrect zoom.
I believe the reason why the solution above is not effective is because not all mobile devices use a base 320 for zoom. So when device-width isn't working, this causes the constraints to be inconsistent.
I tried a bunch of different things, but then ultimately tried the following which (so far) seems highly effective:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
I believe the difference in this tag is that it tells the device to use it's native dimensions, but then adds a scale factor that tells it to not zoom in as much as it would normally.
I never was able to find any CSS adjustments that solved the problem, and I welcome any other answers in the future that may add further clarification to the problem/solution.
One other thing I'd like to add, is that an alternative meta tag that may be more effective for larger devices (tablets, which the site in this problem was not designed for), may be to set maximum scale instead of using user-scalable. Like this:
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">
EDIT / Update 2018:
This question still gets quite a few hits even though it's a very dated problem. Certainly in hindsight and after much more experience with responsive, I can say that both the initial problem and the solutions were based around stop-gap issues that resulted from poorly constructed responsive CSS and HTML.
While the answers here may help future visitors solve for issues when it comes to retro-fitting more dated code, I would highly recommend that any new development conform to the latest in responsive standards. If your markup and CSS conforms, there are very few reasons why you would ever not want the standard meta for viewport in responsive (below):
<meta name="viewport" content="width=device-width, initial-scale=1">
I just removed initial-scale=1 and suddenly Android on Chrome and Silk on a Kindle both worked perfectly, site width matched to screen width in both orientations.
<meta name='viewport' content='width=device-width'>
I haven't tested on IOS, but I'll add an IOS specific hack if I need to.
I had an issue with bootstrap 4.3.1 looking like a scaled down version of a tablet view on mobile using this meta tag setup:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
so then i used the meta tag below to fix on mobile:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
now it looks like bootstrap 4 should look cross device
Great Stuff, however, I have discovered that if you are on a desktop and the viewport is set to a static width the backgrounds may not render on the portions of the screen not shown when you horizontal scroll.
To fix this for non-responsive pages simply add a min-width to the body.
body {
min-width: 960px;
}
Note, this is in addition to setting the viewport a static width
<meta name=viewport content="width=960">
Anyone looking for a fix in the future, stay with content="width=device-width, initial-scale=0.5" BUT adjust the initial-scale= until it works. I built a site that worked fine on different resolution monitors but was absolutely horrid on mobile. Try 0.5 then scale downwards .1 at a time until it works. On two Android phones 0.3 worked perfectly for me.
Just incase some other people are having the same issue I am, my problem as of 3/2020 seemed to be how I was setting up my inputs in my #Media query.
For me the meta tag didn't really do anything.
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0"
/>
My problem was more
#media only screen and (max-width: 500px) {
.input-example {
font-size: .9rem;
}
}
Once I changed it to :
#media only screen and (max-width: 500px) {
.input-example {
font-size: 1rem;
}
}
Everything seemed to work fine. From what I read it needs to either be 1rem or 16px.
Check this answer. In short :
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi;" />
I'm using text shadows for most text site wide, but when you highlight / select the text - the text looks fuzzy. So in order to remove the text shadow I use this css from here.
::-moz-selection,
::-webkit-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
The problem is that for some reason moz-selection doesn't seem to work (anymore?) in mozilla (Firefox).
Here's the jsFiddle
It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.
I originally thought that it was sufficient to write each statement on a separate line.
I was mistaken.
So if I replace this code:
::-moz-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
..With this code:
::-moz-selection
{
text-shadow: none;
background: #333;
color: #fff;
}
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
.... bingo, it works.
FIDDLE
Support is also very good (for desktop): Caniuse
Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.
The following is documented on Mozilla Developer Network:
Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).
The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.
Similar questions have been asked here before, but after reading through them I've not yet found an answer that works with my site.
I've built the site around Bootstrap but added some of my own media queries. Live test site is at: http://agoodman.com.au
The sections being changed by the media queries are "our fees" and the "map" overlay. If you're on a laptop, resizing the browser makes these sections display as blocks.
My stylesheet links:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/user.css" rel="stylesheet">
"User.css" is just a separate file because I wanted to be able to keep and update bootstrap's main framework as necessary. User.css overrides the styles in bootstrap. My media queries in user.css are as follows:
#media screen or handheld(max-width: 979px) {
.fee-buttons {
height: auto;
font-weight: 600;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
.fee-buttons .transformation {
width: 100% !important;
height: 300px;
position: relative;
z-index: 10;
left:0;
}
.fee-buttons .hourly, .fee-buttons .membership {
float: none;
width: 100% !important;
}
li.button{
overflow:visible;
}
}
#media screen or handheld(max-width: 995px) {
#overlay {
position: relative;
display: block;
width: auto;
right: 0;
padding:1em;
}
}
As I said, on desktop browsers this works fine, but on mobile browsers it's not working at all. I've tested both on an iPhone 4 (using safari) and on an HTC Desire (using the stock android browser) and both display the same way - ignoring the media query and just displaying the full website with lots of really squished and unflattering content.
Any ideas on what I'm doing wrong here?
EDIT:
Here are screenshots of what it's SHOULD look like at a small screen width:
And what it currently looks like on Android and iPhone, where the device is ignoring my media queries:
Sorry to answer my own question, but I found something that worked.
There was an error with the way I set up the media query. Instead of
#media screen or handheld(max-width: 995px)
I changed the query to
#media handheld, screen and (max-width: 995px)
as suggested by this guy: https://stackoverflow.com/a/996820/556006
and it worked perfectly across all devices. Thanks to those who offered suggestions, upvotes to all of you.
displaying the full website with lots of really squished and unflattering content.
This might be due to the fact that your media queries target large screens with a width of 979 and 995 pixels. Mobile screens are much smaller.
To target something like an iPhone 4 you need a max-width of 960px (that's why bootstraps default is at 960) for landscape and 480px for portrait.
Since you can't target all possible screen sizes bootstrap offers a sensible list of default widths which you should stick to too.