Ever since doing work on responsive sites, I've become very used to defining my column widths inside media querys...
Eg.
#media (min-width: #screen-sm-min) {
#main-header {
.make-xs-column(12)
}
}
#media (min-width: #screen-md-min) {
#main-header {
.make-xs-column(6)
}
}
But, now that we have xs/sm/md/lg column mixins inside Boostrap 3, this seems like the wrong way to do things. I'm almost inclined to make a separate LESS file for actual column widths, which would mean just mean extending my CSS classes with these mixins with no need to actually wrap column width declarations inside media queries.
I hope this makes sense? I'm coming into the framework from a strange angle most likely!
Hows everyone else tackle this, my main concern is keeping code clean.
Thanks
Phil
If you look inside Bootstrap:
https://github.com/twbs/bootstrap/blob/master/less/mixins.less
you can find, that mixins like .make-*-column have media queries and use these mixins inside other media queries is very bad way.
.make-sm-column(#columns; #gutter: #grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (#gutter / 2);
padding-right: (#gutter / 2);
#media (min-width: #screen-sm-min) {
float: left;
width: percentage((#columns / #grid-columns));
}
}
Related
Does anyone know why my project is like this when small tabed,
enter image description here
But when full screened like this:
enter image description here
My grid has the css of:
.table{
position: absolute;
margin-top: 37em;
margin-left: -42em;
min-width: 1015px;
}
Your style will depend on how it was created in your workflow, but you can try this class
const useStyles = makeStyles({
table: {
minWidth: 650,
},
});
or
.table {
min-width: 650px !important;
}
But this limitation on the size of the table may be related to the element or container that is related to the table.
You also do not need to declare the table's position since it is inherent to your parent and is not placing it in a specific place.
Could you show us how you are applying these classes in your code. You only showed us a small piece of code and did not present the application for that class.
You can also see class applications and table usage on the Material-UI page
https://material-ui.com/styles/basics/
It would be interesting to publish with your question the code where it is generating this situation, just seeing images is difficult to understand your problem
change your css like
.table{
width: 100%;
margin-top: 37em;
margin-left: 0;
}
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 would like to make the top nav bar in a foundation page collapse into the menu form earlier than it does by default because in lower res desktop screens it semi collapses and is neither in mobile view or full desktop view. I tried modifying the following line:
#media only screen and (min-width: 40.063em) { <---This is the line I changed
.top-bar {
background: #333333;
*zoom: 1;
overflow: visible; }
-----many more lines-------------------------
It sort of worked, as the bar collapsed earlier in the re-sizing but the menu stopped working. Any ideas as to how I can accomplish this?
Any help will be greatly appreciated, thank you.
(I'm using foundation 5 by the way)
I know this is an old question but if you haven't found the answer yet, or for anyone else who may be viewing this...
It looks like you were off to a good start.
Around line 1662
#media only screen and (min-width: 9999px) {
.top-bar {
background: #333333;
*zoom: 1;
overflow: visible; }
But you actually need to make changes in 2 additional locations.
Around line 3714:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:9999px)/";
width: 9999px; }
Around line 1436:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:9999px)/";
width: 9999px; }
Full answer is here: Changing Topbar breakpoint using css?
Hope this helps!
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.
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.