I've come up with several Fixed width CSS Frameworks such as 960px GS and grid Generators. The problem with them I found is their fixed width. although it works best with Normal screen but Can I get or someone assist me with a CSS Framework that uses the entire width of the screen available. No of columns, gutter width etc are not much concerning factors.
Thanks in advance. :)
Making % based grids are incredibly easy, I think unless you're going to be using all the features of something like Bootstrap, you're just giving yourself a lot of extra bloat. Making a responsive grid system takes no more than 10/20mins and you'll have exactly what you need, nothing more, nothing less.
Here's a video about making a simple 2 column, % based grid.
And here's a blog post going through pretty much the same thing if you prefer to read about it.
To make mobile specific CSS you'll need some media queries going on, here's a post about that.
Also, if you're going to use media queries, don't forget to put:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
in the head of your pages.
Related
Hello and thank you,
I've seen a lot on horizontal spacers, but specifically, I am trying to put a padding space between the main body text and the left menu bar of this site.
Adding margin-left or padding does not seem to work. On desktop it looks great, but on mobile, the text never resizes to "fulls screen" length.
Any help would be great :) Thanks.
It looks like everything is fixed-width... from your sidebar to your >200px margins. Generally this is frowned upon because it causes tons of issues with smaller devices, and as #Tanckom suggested, you should probably look into restructuring the page with CSS grids.
This means that, without a major overhaul of the style sheet and structure, there's no quick and dirty solution that will make this page look good on mobile.
Here are a few steps you could take to chip away at a more responsive page design:
Add the following meta tag in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will allow you to make the page width take the full width of the viewing device.
Look into CSS Grids or CSS Flexbox as alternative methods of structuring your page. These carry the benefits of staying away from large fixed numbers (such as margins of over 200px), and are more easily manipulated when the screen size changes.
Look into CSS Media Queries, and see how you could use them to change your site's styling depending on screen size. One such media query might look like:
#media screen and (max-width:600px) {
#sidebar_container {
width:100%; /* or something like that */
}
}
I've finished a layout for the website I'm designing using DIVI and it looked perfect on my 1280x800 laptop resolution, but when I tried to display it on the bigger resolution (in this case 1920x1080) a lot of the elements (mainly the ones with left or right margins/paddings) were out of place. I've tried using percentages instead of pixels as my margin/padding values, but gave the same result.
What would be the best practice in going about designing responsive CSS layouts? Should I define fixed values for width of the containers? Will that solve the issues?
Should I focus on media queries? Define values for each resolution? Then again, there's the issue of resizing the window which again would make the whole media query solution obsolete. What are your suggestions?
RWD (Responsive Web Design) is an argument too broad to give you a single answer. Personally I love building my own web pages from scratch, without any page builder or something like that, and this's the tip I give you: first, try to build your own web pages by hand!
Three guidelines I can give you to build a responsive website are:
Use percentage values, no fixed values;
Use media queries;
Use the display: flex property to adapt the layout of webpages when the screen width changes;
With these advices I think you can build easily your responsive web pages.
There are many other factors to worry about: search, learn and get your hands dirty with code!
I am looking for a CSS package that will aid one in building a fluid/responsive layout with scrolling content... I don't know if I'm describing this accurately, but what I mean is represented well here and here.
there are others, but those 2 show it well enough.
Any tips to that? Am I overthinking things, and it's as simple as one big column-less CSS grid (i.e. I could even use twitter's Bootstrap as a starting place)? I've tried some simplistic designs with this, but it never seems to work for every device / every time I resize the screen.
Thanks all for the help.
When doing responsive design, you'll want to make sure you set a meta tag to viewport initial-scale value of 1. Mobile devices tend to pack more pixel values into actual pixels so that they fit on the screen, but if you set the viewport's initial-scale value to 1 then you're essentially telling the device you want the page to be viewed on at a 1 to 1 pixel ratio.
Add this to your header:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
I am just getting started with designing a Mobile App with Html,Css,Js via PhoneGap and my first goal is to ensure that all the content fits perfectly on any given phone. So I wanna ask you guys if my approach is correct, and how should I implement it.
My idea is to take the device Width and Heigh via JavaScript, I think there are some PhoneGap functions that return these values. Then I'll use this values to set the html Width and Heigh(I think I should do this via onBodyLoad() function, correct me if wrong), this way I set up the html body to the device screen size, and then I position all the other elements via % instead of pixels.
I also saw on on some random search, this line:
<meta name="viewport" id="viewport"
content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
This looks like should work too, but Im not really sure if it does,and how it works.
Soo...what do you guys think is the best approach to do this? maybe there is some other one Im not aware of?
Thanks a lot for helping!
Depending on the elements you are using etc. you should be able to get away with just setting widths to percentages, no need for any javascript or anything of the like.
The viewport code block you posted is pretty standard Phonegap code that just makes it so you can't soom in on the page etc.
Here is a free PhoneGap framework. It has a div#body as a shell of your application, the #body has full width and height as the phone screen. everything is wrapped in #div.
I am building a responsive layout with Twitter Bootstrap and I am finding it difficult to keep the layout looking good across all sizes/devices.
In my early attempts I tried simply using the grid for placement, but page elements never ended up where I wanted them at different sizes. Now I am at the point where I am using media queries to override some of Bootstrap's styles and my own styles. This seems like it may cause a maintenance headaches down the road.
Rather than overriding styles I am thinking that I should add/remove the styles based on the screen's size by registering for media query events.
Can someone offer advice on good practices for adjusting the layout of a page at different screen sizes using Bootstrap?
I am looking for general advice, but I can post code and screenshots if that will help.
Update: Looks like media query events are not well supported.
Your on the right track. Use CSS media Queries. Firefox has a nice add on that enables you to adjust the page to a particular viewport so that you can see the changes pixel by pixel, though Im sure chrome would have something similar
There are no special tricks just because its bootstrap, as long as you have enabled the responsive stylesheet then you are pretty much good to go
This is a good place to start for media queries
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/