sorry for asking as I hate asking questions but sometimes its the last resort.
I am pulling my hair out over here and I have read hundreds of pages over the weekend and just can't get my head around how to do achieve this.
I want to have a simple 4 column 'home' landing page for desktop and ipad (sub pages will revert to 2 columns - content and sidebar). When the user goes on to a iPhone I want the user to see 2 columns.
I have managed to either get the iphone to display a scaled down version of the 4 columns using the grid system or I have managed to get it displaying 1 column, neither of which help me.
I have attached an image of what I am trying to achieve if it helps but I would really appreciate if someone who has had some experience in this field to point me in the right direction as I just cant figure it out.
I am developing using wordpress and have tried bootstrap, responsive theme and bones and getting the same results with each. Each using a responsive fluid grid. I may be barking up the wrong tree but if someone could point me in the right direction I would appreciate it.
You need to use CSS media queries, based on screen size / device width.
This will allow your CSS to style the widths of columns on each device...
http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
Current versions of Adobe Dreamweaver now also support what are called "Fluid Grid Layouts" which are worth a look for this kind of issue. They are also very helpful for quickly solving inter-device layout issues. You can design easily for Mobile, Tablet, and Desktop in one interface!
Related
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!
Preface: I am not a developer, but I was able to figure out enough about CSS to modify the twenty twelve theme for desktop browsers into this website: http://www.abcllc.org
Now that I have that looking the way I need it to, I've turned my attention to mobile. The theme has responsiveness built into it, but when I access the site from a mobile device, it scrunches it way up into the left side of the screen. Can I set a minimum width for mobile screens, or set it to auto-fill a mobile screen? The only thing I've figured out is the cutoff width between mobile and a regular browser (which I set to 640px).
I found varying threads throughout the interweb with people having the same issue, but with no answers. Any help would be greatly appreciated!
You can check out mine and see if that helps.
http://www.fossfolks.com/
My site is by no means the best example of css and design, but there's a lot less going on and it might be easier to see. There's a link to the stylesheet in the source. My current struggle is getting images to resize (width AND height) based on a percentage of screen width; I've not been able to sit down long enough to make it go.
I was wondering is there anyway to get a exclusive tablet view in foundation with its grid. I want an specific grid layout for desktop [achieved], one for tablet [not achieved] and one for mobile which is done perfectly. but after it's major breakpoint at 768px there's no difference between mobile view and tablet view regarding the columns lining upon each other. If you get what I'm saying some of columns get too big in tablet view which isn't absolutely necessary. There's no necessity to show them with 12-column mobile grid.
Second issue, I downloaded the RTL version of Zurb Foundation (the problem stays when using the original copy), the "row" element which has a role similar to "container" or "wrapper" or something like that, is started from the right side (left side in original version) and it's not absolutely centered. The problem becomes more critical when we enter mobile view and using block grid. Elements are not centered.
I really appreciate your answers guys :)
To answer your first question you can only get the tablet only grid if you are using SASS or SCSS.
*This experimental feature is currently only available by using SASS and importing the _grid-5.scss file into your Compass project. You can also simply download the grid-5.css file, and link to it in your HTML head after your foundation.css.
Medium Grid
As for the RTL can you post a example showing how it looks in RTL and LTR so I can get a better idea of what you are seeing. Also its easier to have one question per post.
I've searched all over for the answer to getting the proper column widths for 16 column bootstrap responsive layouts.
I've found posts that suggest this can be done. But it does not work for me.
I've tried the Bootstrap customize page. But it doesn't update the responsive part at all. I end up with span16 widths that are 120%+
I tried using the less files and updating the variables. But, again, I end up with wrong widths – for 1200px+ screens, I end up with a 1600px-wide layout.
Perhaps I could update all the values for each screen size individually. But since it's not just the span widths but also inputs and other widths for each screen size, it really starts to get unruly. Especially since I'm not 100% certain what the widths are supposed to be, especially when you get to smaller screen sizes.
There must be others who've run into this issue. So, maybe I'm just being obtuse.
But any guidance or wisdom on this issue is greatly appreciated.
Much thanks.
It has been taken care of in the soon to come twitter bootstrap 2.1.0.
i'm using css to make a webpage and i have been stuck on this problem for a while. i have seen other website resize according to the resolution of someones monitor. i don't know much about css or any other things like it. can anyone tell me how i might accomplish this? my website is
http://ryanlaurence.com/
It's typically done with CSS, and called a liquid layout or fluid layout.
There are a lot of sites out there that describe various ways to do it.