SOLVED - here's the link to the Foundation forums where it was answered:
http://foundation.zurb.com/forum/posts/3294-have-content-text-flow-under-sidebar-div-on-large-screens#
ORIGINAL QUESTION -
I have a two column layout with the left being a few paragraphs and the right being a sidebar div with links. I would like:
On large screens: The text to flow to full-width underneath the sidebar. (Like if it was a float based layout.) Currently, the columns restrict this so that the paragraphs stay in their defined columns.
On medium and small screens: The paragraphs to take full-width AND appear at the top. The sidebar coming only after they are complete.
Also, I'd prefer it if it didn't require any additional javascript but instead was just basic HTML, CSS and Foundation....
Here's a codepen with it looking as it should on large screens but behaving badly everywhere else. http://cdpn.io/LIKfa
Any insight is much appreciated!
Related
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've been experimenting with bootstrap and I think it's great. However, I've come to an issue that I would love to be able to apply this style, but do not know how to properly do so. What I want is for a section to be split into 2 halves (side by side) - one section has text and content and the other has an image. I know how to achieve this with bootstrap using containers/rows/columns, but I want to remove the borders and margins from the second section so that the image I set in there will take up the full space. It is difficult for me to describe in writing exactly what I want to I have attached a screenshot to depict what I mean.
Please refer to the "OTHER EXPERTISE" and "AMAZING PORTFOLIO" sections in screenshot..
It sounds like all your trying to do is make that other section full width? In that case just set the container width to 100%
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.
I'm building a site with various background images with content laid on top of it. The way I have it now is not working because when I view the site on a mobile browser, some of the elements get pushed to the left leaving an ugly white space on the right.
This is because the elements that are being pushed aren't contained within a wrapper. However, I am not sure how to lay out all of the elements especially with the various background images that they need to be laid upon.
I've created a simple image of how the divs are laid out.
Note: All the text 100% width, etc is referring to the divs under the red transparent boxes (the content). The actual site can be viewed here.
Can someone help me figure out how I should build the HTML properly for the layout of this website? For example, should I split the top half and bottom half to #top and #bottom with a wrapper within each? I'm stuck as to how I should approach this.
It seems that all your widths are based on pixels when (for responsive results) should be percentages.
What is ruining your iPhone layout seems to be the pinboard ID at 1122px with a margin of 47px. That is much wider than the other divs above and below.
However, fixed layouts can be applicable to mobile. See -> fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
I am new to using Skeleton CSS grids, so please excuse my ignorance!
My problem seems a simple one at first, but it's had me a bit stumped.
Say for example, that I have a website with a left column sidebar at 4 columns wide and then a right column content area spanning 12 columns. Something like this:
On smaller screen sizes, the sidebar collapses to be on top of the main content area. This is not what I want though...because of the linear nature at smaller sizes, I want the sidebar to appear below the main area, so that content is shown 'first' on more mobile devices.
The default behaviour of Skeleton is to stack this sidebar on top of the main area.
Any ideas as to a solution on this? Could I perhaps use negative margins and semantically adjust the markup to place the sidebar below the main area?
Thanks,
Michael.