I have been working on making a site responsive for a client. The client wants the left menu to drop to the bottom when the site collapses down. All pages work this way and here is an example:
Page working correctly
However, there is one page that is 3 columns (all others are two columns) that isn't working properly and here is the example:
Not working correctly
Right now the structure of the page not working correctly is:
<div class="content-column-left" id="bio-nav"></div>
<div class="content-column-center"></div>
<div class="content-column-right"></div>
I have noted that if I rearrange the columns in Developer tools so they sit like this:
<div class="content-column-center"></div>
<div class="content-column-right"></div>
<div class="content-column-left" id="bio-nav"></div>
I can then add a float:left and a width=21% to the #bio-nav and then a float:right to the other two divs and I get what I want on collapse, but it looks terrible at full screen.
How do I make this work so that that column with the navigation collapses to the bottom like the other pages? I am willing to restructure things as needed. Thanks!
EDIT: I made a small change to the structure and adjusted so the widths are percentages. At this point the right column refuses to collapse under the center column at all: Updated way site is collapsing
On that page the markup needs to be as follows:
<div class="content-column-right content-body content-right-team-member"></div>
<div class="content-column-center content-body content-body-team-member"></div>
<div class="content-column-left" id="bio-nav></div>
Then
.content-column-right
needs to be
float:right
Then
.content-column-center
needs to be
float:right
Then (I think this one is okay as is)
.content-column-left
needs to be:
float: left
Anything after that your just going to have to mess with it
Related
The html code on the actual webpage
Hello. I am having some problems with pictures not properly displaying on a website. I have added the picture and created a div.tag for it and also added it to the CSS but it simply will not show properly. http://mala.co.uk/projects-sw-adelphi.html is one of the new webpages that I have added. http://mala.co.uk/projects-cat-a-eastcheap.html is a webpage with a picture being displayed properly. It is really baffling me why the new pages I have added have the pictures being cut off while the older pages render the pictures perfectly. The Eastcheap picture is how the size should be (more square) but new pages are showing the images more rectangular. Any help would be massively appreciated. Kind Regards
You have set a specific height for the large-6 columns divs. Changing that height has an influence on the image, as it is relative to the parent div container.
I am not sure how that height is generated or if you have hard coded that. It might also depend on the text on the right col, which will change the height of the left col.
Edit: I have edit your code in the inspector. It looks like that.
<div class="large-6 columns panel-container" data-equalizer-watch="" style="height: 450px;">
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/
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 am using Twitter bootstrap for my portfolio site. The fluid layout seems to work up to a certain point, but there are a few issues with the home page.
Once I go smaller than about 997px, the nav menu disappears entirely. It almost looks like it drops down below the header bar and is hidden, but I can't seem to get it to show. It should actually switch to the mobile menu and remain in the upper right corner.
Also once you get down to smaller screen sizes, the "About Me" and "Contact" sections of the index page overlap each other. I'm sure this has to do with my structure somehow, but cannot find the problem.
Any bootstrap experts know what might be causing these issues?
Here is a link to the test version of the site. http://theiamzone.com/kyle_hagler/portfolio-site
From the source code I view from the site,
I Found out that you lacked of jquery file.
<script src="//code.jquery.com/jquery-1.10.1.min.js">
Put it and see if the dropdown work.
And for the About Us and Contact Us part.
A method you can try is put container to wrap them all, read from here for more information.
http://twitter.github.io/bootstrap/scaffolding.html#layouts
From my point of view in about us section, try no to wrap the 2 span 6 column,
Use the following code instead.
<div class="row-fluid">
<div class="span12">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
Same situation happen on the contact us section,
the css class aren't assigned for them to work.
I have this one particular page: http://www.problemio.com/problems/problem.php?problem_id=230
It has broken layout. But the weird part is that I use this template with lots of different content and the columns never break like that. Most of the time, the left and right column just align.
Any idea why this happens on this particular page? I can't locate the problem with firebug.
Thank
You have an unclosed DIV and this is breaking your layout and putting the right column into the left column. Firefox will automatically fix this for you so you may not be able to see this in firebug.
<div class="left">
<div class="right">
</div>
Viewing your source code is better than using firebug for this - as firebug shows you the DOM and the source is what your browsers sees before it renders the page.
Make sure you are closing all your divs. It looks to me like you are not closing all divs and therefore the right column becomes part of the left column div (instead of being a sibling).
To be exact, it looks like there is a </div> missing right before the comment <!-- Closes left div -->