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.
Related
I simply want to reduce desktop view width slightly but can't get it to work with media query. My latest attempt is
#media (min-width: 992px) and (max-width: 1199.98px) {
html, body {
max-width: 80%;
}
}
but it has no affect. I don't think I want to mess with container b/c that would leave out the navbar. Using my own stylesheet (added below bootstrap cdn stuff) rather than using the media queries directly in template.html but I don't know if that makes any difference. Am I trying to do this the right way or am I completely missing something?
You don't want go banging around on high-level elements when using a layout library. This limits what you and others can do in the page later (say you want a full-width banner somewhere). You also probably don't want to casually override all instances of a Bootstrap class.
In this case, look at adding a custom class to the .container or .container-fluid element, limiting its width:
.container.narrow {
max-width: 80%;
}
Use that for any containers where you want a narrower width, and use containers without that class for wider content.
<div class="container narrow"> ... </div>
Whether you apply this in a media query is probably immaterial.
I was strugglng to find the answer to my screen not working correctly for the mobile and below answer from you worked like a charm. Thanks so much for your answer. I removed the meta-name line and it worked like a charm.
Mohan
#Beanic
I presume that you have added the viewport tag for that() –
Jan 22, 2020 at 12:50
My website is www.dreamzabroad.in,
I want to make it mobile responsive. Like when you visit the homepage the slider is placed beneath the header logo, i want to push it down and make the heading tags fit to the mobile display?
One of the simplest ways to make your website responsive is to use Bootstrap. Use this link as a starting point:
http://getbootstrap.com/getting-started/
You will need to include the bootstrap files on your website and use their classes which you will find on their website in order to make your content change widths and fall under each other on different screen sizes.
You want to look into media queries, which will allow you to change your CSS based on certain conditions.
If this is too daunting you can simply use a framework such as Bootstrap which has done the groundwork already, you just need to add the relevant documentation.
Use Bootstrap media query or simply use custom media CSS properties.
for bootstrap you can simply use CDN link like as below in your index style tag to use CSS without downloading in your project and then just apply available classes in your code.
<link rel="stylesheet" href="./contact_files/bootstrap.min.css" />
Add below Media CSS according to your device width in style tag of your index or main achieve responsiveness.
#media screen and (max-width: 600px) {
body {
background-color: Yellow;
color: Pink;
}
}
#media screen and (max-width: 711px) {
body {
background-color: Green;
color: Red;
}
}
References:
https://www.geeksforgeeks.org/bootstrap-media-queries/
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;
}
}
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.
I'm working on a site which has to be compatible with many kind of devices, so I've chosen to use Bootstrap. My problem is that while I have a nice responsive grid layout, I don't see an out-of-the-box solution for making other visual parts of my site responsive. I mean for example font sizes, form field sizes, button sizes, etc.
What I want for example is to have normal button sizes for desktop, and large button sizes (.btn-lg class) for mobile. Similarly with form inputs. Is there a nice, global level solution for this way of responsiveness?
Thank for the answers.
EDIT: I would like to reuse the existing bootstrap classes as much as possible, with minimal added media-query or other code. I'm looking for something like "conditional classes" on elements based on resolution, like the following: if there is "sm" or smaller screen, add "btn-lg" to "btn"-s. If there is "md" or bigger, don't add anything, just use pure "btn". And something similar with form inputs.
Font-sizes and paddings are more simple with simple media-queries of course. My problems are mostly with form fields and buttons, just as I note in the corrected title.
I would like to avoid copying and duplicating more complex (like buttons and form fields) Bootstrap CSS code into my css
They are responsive to some extent. To add this level of responsiveness you must write your own media queries.
It's very easy. It's even easier if you are using SASS or Less.
See starting at line 260 in the variables file. Here's an excerpt.
#screen-xs: 480px;
#screen-xs-min: #screen-xs;
#screen-phone: #screen-xs-min;
A phone example:
#media (max-width: $screen-xs) {
// Change h1 size
h1 {
font-size: 20px;
}
// Change .btn font size.
.btn {
font-size: 10px;
}
}
If you are not using Sass or Less, just swap the variable $screen-xs with the value that you want--480px, for example.
use % rather than px.
Or use media queries within your css