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.
Related
I've been trying to make a responsive Nav-bar that is on top when Mobile and on side when Desktop.
The problem is that to achieve this I'm not sure what is the correct approach regarding the Rows and cols. Because on mobiles, I have a Row with col-x-12 for top-nav and another Row with col-x-12 for the content below.
But if i want to achieve a side by side cols (col-2 and col-10) for dekstop sizes, I have a problem regarding the 2 rows. They can't be side by side.
Also I tried to make 1 row and 2 cols, for navbar (col-md-12 col-lg-2).
For content (col-md-12 col-lg-10), but i don't know if its safe to have 2 cols-12 inside one single row, So, what would be the correct approach for this responsive navbar? thanks!
I may have a solution for you.
Try to make two div, one is only displayed in desktop resolution (it would contain the sidebar), and one is displayed in mobile resolution (would contain the topbar)
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Take a look at that https://getbootstrap.com/docs/4.3/utilities/display/
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/
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!
I trying the CSS-Framework Bootstrap and I have a question.
Here is the Fiddle: http://jsfiddle.net/hzAUz/
Let's say I have a div, with 3 equal divs inside of it:
<div id="main" class="row">
<div id="columnleft" class="span4">LEFT</div>
<div id="MainContent" class="span4">Content</div>
<div id="columnrigh" class="span4">Right</div>
</div>
So what happens, when you use Bootstrap, is that as soon as the windows get smaller, the Divs are stacked in this priority:
1. Left
2. Content
3. Right
But it makes sense, to put the content first.
Does anyone know how can insert priorities when using the bootstrap-responsive.css?
Thank you very much in advance.
KG,
George
There's a few ways you can do this.
One would be:
Start at the mobile size, and design "mobile first". That would make your small screen stuff easy, and then you could add additional classes to those containers to accommodate the larger screen sizes.
Another option:
Plan for mobile, and see if you can't either hide/convert your elements in smaller screen sizes to something more mobile friendly. ie...your left stack of nav links become a select menu in mobile; thus, only taking up a single line of real estate.
My preference is to use javascript, and convert left, and top navigation into a show/hide element (button) in mobile size. That way, I've just a logo and button in the top of my UI, and content immediately following.
I do not believe there is a way in Bootstrap 2, but if you were to move to Bootstrap 3, you can control column ordering. See http://getbootstrap.com/css/#grid-column-ordering for details.
Definitively upgrade to bootstrap 3 if you can, as #Sean suggested, but if you can't right now, some of these answers may help:
In Twitter Bootstrap 2, how can I get right columns to move to the top when shrinking the screen?
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/