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.
Related
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
I've been using one particular front-end framework for mobile apps for quite sometime but I won't mention the name here because it is irrelevant to my question. I've tried its other competitors, but none piqued my interest.
Particularly they all seems hard to customise with Bootstrap templates.
Bootstrap IS responsive and now mobile first, but it needs additional library to make it more native looks and feels.
So I think, may be I should try small libraries working together with Bootstrap.
I am looking into library/code that will make my web-based, Bootstrap apps feels and looks native to smartphone/tablet.
Here I list what I think are supposedly the right behaviours to have:
1. Fast click
This one I already know the library: Fastclick.
2. Hidden Scrollbar
Maybe this one is sufficient? JS Fiddle:
Javascript
var parent = document.getElementById('container1');
var child = document.getElementById('container2');
child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";
CSS
*{margin:0;}
#container1{
height: 100%;
width: 100%;
border: 1px solid green;
overflow: hidden;
}
#container2{
width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 0px; /* exact value is given in JavaScript code */
}
html, body{
height: 99%;
border: 1px solid red;
overflow:hidden;
}
3. Disabled Zooming
Is this sufficient?
<meta name="viewport" content="user-scalable=no"/>
or should I use this?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
4. Ability to Include partial .html page (for fast loading, particularly a shared <head> tag):
Please suggest library or code
Please leave comment if you think I should add more behaviours. For now, these 4 behaviours are what I'm looking into.
FYI, I've tried OnsenUI with AdminLTE (Bootstrap Template), almost successful, but the scrollbar behaviour is bad. (showing when not supposedly shown, and the scrollbar looks is not that of native.
I am building a website in wordpress so i selected the responsive theme ,
& increased the width of page by adding css .container {
width: 1340px;
}
now my site becomes unresponsive , any solution for it?
Thanks
website - http://cardmart.tk
Your theme is mobile first, you have 3 breakpoints:
/* here the mobile */
#media all and (min-width: 768px) {
/* tablet */
}
#media all and (min-width: 992px) {
/* laptop */
}
#media all and (min-width: 1200px) {
/* bigger screens */
}
This are the rules defined in your theme, the best solution would be to modify all of them in order to fit you needs, but you have to consider that the '.container' class is assigned to several elements.
The quick fix is to modify your rule in this way:
.container {
/* width: 1340px; */
width: 100%;
}
Adding a fixed width certainly does not make your web site responsive. There's much more to it.
First, remove this style that breaks your site's responsiveness:
.container {
width: 1340px;
}
The reason that it breaks responsiveness is that you applied a rule to .container and did not attach it to a media query that sets its' width for a desktop screen size.
So if you want your site to be 1340px wide on desktop screens, instead you could add it like this:
#media (min-width: 1370px) {
.container {
width: 1340px;
}
}
Note the the min-width value could be modified, but it's assuming 15px padding on each side, so it makes sense (1340 + 15 + 15 = 1370).
Another important issue is where you place your CSS rule. It should cascade in an order that makes sense - from the general rule to the specific rule, and becuase your rule was placed at the bottom, it was overriding the width for all screen sizes and made it non-responsive.
I'm making a site from scratch, and haven't gotten far before getting stuck-
It's very simple code, and nowhere do I specify margins or padding, yet when I view the page in Chrome and Firefox, there's this margin on the left side keeping anything from existing for the first 25 or so pixels. Something tells me this is normal/default, but is there any way I can completely center the page, surely it cannot be truly centered with this left:10px looking thing...
Here's the CSS:
.header {
height:100px;
width:100%;
top:100px;
z-index: 1;
position:fixed;
background-color:#767676;
top:0px;
}
html {
background-color:transparent;
color:#555555;
font-family: 'Roboto', 'Univers';
line-height: 1.0em;
width:100%;
height:100%;
background-color:#f8f8f8;
}
...And a screenshot showing exactly what I'm talking about:
http://i.stack.imgur.com/vFDID.png
You probably need a CSS reset of some sort to erase browser defaults. On my projects, I include * { padding: 0; margin: 0; } at the top of my CSS. This takes care of almost everything.