I'd like to create a responsive (or adaptive) site based on the wireframes here (also below). Essentially a 12 column grid with the first 1-2 filled with images and text in certain vertical areas.
How could I go about this? My thinking so far has been to create a dedicated left column, and then push everything else to the right of it. I feel as if this isn't semantic though, and am being forced to manually space items with absolute values.
The grid should work at both large (desktop) and small (mobile) sizes. Thanks for your help.
Related
I am writing a web app using Zurb Foundation and have come across a small issue.
I need to be able to have a responsive table with a fixed header and fixed first and last columns with the other columns in between being scrollable when the width is too small.
Is this possible with just CSS?
Check out this JSFiddle for a solution to your problem.
Shrink your screen to see the effect you wanted. The only problem with it is that when the header is fixed it doesn't scroll right. You can remove the fixed-header class from the table to remove the fixed header effect, in which case the horizontal scrolling will work correctly.
WARNING: Personally I wouldn't recommend this approach, because the user would have to know that there are extra columns to be scrolled through. Additionally, the user may not even know how to show the hidden columns (horizontal scrolling is not intuitive for tables).
ALTERNATIVE: I assume that the rationale behind this approach is to be able to show a large table on a mobile device, in which case, I would recommend a different solution of collapsing large tables into a two-column layout.
Check out the following CodePen snippet. I use this strategy all the time in my projects.
Simple Responsive Table
My web page is simply consisted of 3 sections:
1:section 1, on the left, it is responsible for displaying messages, it is a small area and is "aligned" to the left of the screen.
2:section 2, on the right, it is another area and is "aligned" to the right of the screen.
3:section 3, on the middle, it is the "main" area of the page and it is consisted of quite a few number of elements that "fixed" with the screen by many div tag. I really think I over use the div here.
I have already made the section 3 look organized by manually fixed (define absolute position and pixel) those div. But it only look good in my computer with one screen size. I want to make it responsive to other devices by using mediaQuery. But since I got so many div it will be a pain to specifies the position for each. Can I wrapp the whole section 3 with another div wrapper and then just change this wrapper position? I tried but I failed.
Or is there another efficient way? I am open for bootstrap but I can not find any framework similar to my design. And My design is really simple so get it done without a template would be the best.
Section 3 looks like this:
https://jsfiddle.net/9jpdw4f7/
I am still trying to sort the size of top menu on "page2";
however I need this work to soon, and wonder if the other way will be to add a couple of boxes, like 2 containers to give ample space for the menu to work as it is designed to and get smaller.
Here is the URL as there are loads of codes: http://www.dijon-egg.com/Possum/
Thanks a lot,
Byron
I want to align centered an image and a short text, relative to viewport.
I would like to have the image followed by the text in the same line when it is space enough, like landscape view.
And when isn't enough space for both in the same line, I would like the text to slide under the image, and both to be still centered!
Any ideas will be welcomed.
Your request is the basic fundamental reason why the whole area of responsive web pages exist, and mobile first design methodologies ... this is a very very generic question, you need to be more specific ... are you trying to achieve this just with your own html and css ?? are you using any frame works ?? This is standard business as usual for frameworks like Bootstrap3.0 and jQuery. If you have not heard of them, then I would recommend stop trying to re-invent the wheel, get a crash course in Bootstrap3.0 (particularly in the scaffolding, this is how you achieve responsiveness, you can specify css settings for different screen sizes, what is the minimum width of an item, and what to do in the event that this minimum width is crossed ... slide one item under the other ... items can be divs, viewports, ANYTHING)
CSS - Floating two elements side by side
This conversation is similar to what I am trying to achieve. I have a % based layout and have an issue either the menu will get mixed in with the content or the content will fall below the menu when the page is shrunk or viewed on a mobile phone. I've spent several hours on this and cant figure out what I am doing incorrectly.
Problem child: https://www.tendercare-inc.com/new/
Update:
My biggest thing was getting something that worked well with Word Press as it uses very awkward controls and element names. I tried starting with _Underscores but it doesn't seem to have helped as much as I thought it would.
The basic problem is that you are specifying percentage based layouts for some elements like menu-sidebar and main-content but you're not consistent. The menu has a min-width of 200px. What do you want to happen when 200px is greater than 15%? Inside the menu you also have elements specified with exact pixel widths — the various cssmenu maker elements.
The site is very simple — basically a header, footer, side menu, and body. Yet you have two style sheets - one with over 800 lines — and a structure with site-content containing content-area containing site-main containing content-container. It's no wonder it's causing you grief. My advice would be to start over with a simple css framework (like bootstrap mentioned by #jaun above. Keep the structure of the html as simple as possible and avoid copy-paste design with things like menus. Also rather than trying things a seeing what's wrong, describe the behavior you want at various screen sizes and make it happen.
You should use bootstrap (getbootstrap.com) you can use col-md-6 clases to do that. Also mobile phone and tablet ajustment is supported