What i'm going to query here is close to a question but i really hope that it can help many other people with a similar question.
I've been looking for some resources online for best responsive design but it's difficult to get a strong defining answer so it might be nice to receive different peoples methods and opinions.
I've been using media queriers a lot for the responsive design as well as Bootstraps grid system which helps making things responsive.
Now sometimes i've found that allowing the grid to control your elements responsively isn't effective for mobile devices in fact sometimes i feel that the content requires an entirely different approach which is where i end up doing something like this:
#media (max-width: 991px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
#media (min-width: 992px) {
.desktop {
display: block;
}
.mobile {
display: none;
}
}
With some HTML to go with it like this:
<div class="desktop">
... approach 1 displays only on desktop ...
</div>
<div class="mobile">
... approach 2 displays only on mobile ...
</div>
I don't know if this is a good way to do it when the designs require different layouts or styles for a mobile design especially with sometimes with backgrounds and breaking out of the grid that you can't simply break to columns to stack because of some of the web content in the background.
I know you can also do things such as m.domainname.com for mobile sites but to me this feels like moving to an extreme level especially when most of the site works responsively but some sections don't. What ways are significant for doing this? especially when you are working within a grid.
Related
As the title says pretty much. I have a lot of hard coded widths and the whole thing is using tables to position the items. Is there an easier way to make it mobile friendly, other than going trough the whole code changing things? Preferably with just css, no javascript.
sure,
With css+media queries you can re-style all the table/tr/th/td elements.
if you want a short example.
just try to apply this style to your website
<style type="text/css">
#media screen and (max-width: 800px) {
tr {
display: flex;
flex-wrap: wrap;
}
}
</style>
And reducing the windows,
you'll see that all rows will become flexible
Yes. You can do it by using media queries.
Is it possible to hide element on devices smaller than tablets (col-sm-* & col-xs-*) without using 2 bootstrap classes visible-md visible-lg on the element with bootstrap 3's predefined classes:
<div class="col-sm-8 visible-md visible-lg"> ..</div>
Thanks
dkj
As per the documentation the visible (and hidden) classes only show for that media query size, if you wish to extend the classes to allow you to do this with a single class you can but this would require you to have a basic understanding on media queries and css3 (sass or less if you use a preprocessor).
You could just use the hidden-xsclass to hide it below the col-sm-* query range as #Vijay Maheriya said in the comments.
If you only have one (or a few) element(s) you want to hide/show selectively, it's probably easiest/best to just use both classes. If you are doing this with several elements and prefer to keep your markup cleaner, you can easily just create your own class for this. For instance:
.hidden-sm-xs {
display: none;
}
#media screen and (min-width: 992px) {
.hidden-sm-xs {
display: block;
}
}
If you've customized the Bootstrap breakpoints, note that you will need to adjust 992px to match your custom breakpoint. As others have noted, you could just override one of Bootstrap's existing classes, but I prefer to just create a new one...It's the same amount of CSS, and you never know when you might actually want hidden-xs to hide only on the smallest screens like it was intended. But if you've overridden it, you'd have a lot of refactoring to do.
Yeah, forget about the classes and just do:
.your-selector {
display: none;
}
#media(min-width: 992px) {
.your-selector {
display: block;
}
}
Use the classes for more specific cases when realy needed.
I am trying to make a website with materialize css that is fully responsive for a product that my friend is making. I have a layout in materialize for mobile and for desktop but I don't know how to make them shift columns when the page gets to a certain size. The mobile code is just all col s12 but on the desktop version it is more split. Any help or input would be appreciated.
Thanks again, Optimistic.
I think you should design your page for each screen size differently. Materialize CSS gives you the opportunity to use use different classes for different screen sizes.
By defining
<div class = "col s12"> mean you use 12 columns for every screen size. I think what you are looking for is something like <div class = "col s12 m8 l4">
You can get detailed information about grid system from the referance below:
http://materializecss.com/grid.html
Also, you might want to check for bootstrap as well. It is very easy to use in Visual Studio 2013.
If you have enough time (a day or so) there is a useful training in MVA explaining the grid system, responsive web design using Bootstrap which is completely free. You can find it in:
Building responsive UI with using Bootstrap
Hope this helps you
Cagri
If I understand correctly, you need to make different view for different platforms.
This is best made by #media(){} in CSS, which is situated for this problem>
More info here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Shortly you define #media for width you need and give different attributes to your columns.
Example:
#media (max-width: 768px;) {
#columns {
display: block;
width: 100%;
}
}
#media (min-width: 768px;) {
#columns {
display: inline-block;
width: 50%;
}
}
Will make your columns next each other on tablet and desktop and under each other on mobile platform.
Otherwise, Bootstrap is a good option how to do this.
Hope it helps.
You should refrence their documentation (http://materializecss.com/grid.html)
Basically, there are three main settings: small (s), medium (m) and large (l) within grids. You can choose to hide content on different screen sizes also.
I'm trying to figure out a way to make this work using CSS. I use wordpress and a theme so I can't really change much of the markup so I'm trying to solve this problem with CSS first.
I'm building a site with 3 columns article. It's working fine on desktop but when you start resizing. It goes like this.
What I want is that 'First post from Salon87 Brooklyn' should be next to 'Second Post' like this.
And this is what I want it to look like on desktop
Here's the code. http://www.salon87.nyc/news/
The problem with the HTML is that, there is an element fix added to the blocks. You need to hide it for mobile devices. Try changing 991px to your requirement.
CSS
#media (max-width: 991px) {
.fix {
display: none;
}
}
This is the second attempt at this question as I have worked on this since I last asked so hopefully I'll make more sense this time.
I'm creating a responsive layout for my coming soon page. The main body header changes depending on the size of the browser and the device.
<h1><span class="main__header--changer">COMING SOON</span></h1>
... and the CSS
#media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
#media (max-width: 64em) {
h1:before {
content: "NOT LONG TO GO";
}
.main__header--charger {
display: none;
}
}
... and so on and son on, the different variations of coming soon contains less letters as the size goes down, right down to 'nigh'.
The only thing my way of doing this means that screen readers wont read the heading because of the display:none. Is there a different way to hide the heading but not from screen readers but that the content is shown from the css?
Thanks
You can create a hidden effect by bumping the content way outside the screen display area using margins or the text-indent property. These methods aren't what I'd call 100% clean, but they at least keep your HTML markup tidy.
Check out this helpful thread that explains screen reader interactions with CSS-hidden elements.
I also assume that in the second reference in your CSS you mean --changer not --charger.
On a side note, if the statement: .main__header--changer {display: none;} is the same across all your media queries, you should consider just writing it once outside of any queries so it applies universally without duplication in your code.
Hope this has been helpful!