So I am working on a prosject learning twitter bootstrap but got into the problem being that the website is not actually mobile friendly and look bad on big screens.
Here is the link:
jsfiddle: http://jsfiddle.net/6LsG7/
The sticky footer also covers alot of the content.
It seems that you are not using any classes provided by bootstrap. Instead you are creating your own id's? Bootstrap has a structured framework with the use of classes such as "container", "nav", "column".
For you to obtain a responsive design you must abide by the classes pre-provided. Might I suggest you check out a WYSIWYG bootstrap layout maker such as LayoutIt.
Bootstrap comes with a grid-like architecture that will allow you to create sections in your page so that they all line up and stack appropriately. Become familiar with this first and then assign the right classes to each section. For example:
col-lg-12 is will create a section 100% wide.
col-lg-11 will create a section ~90% wide
...
col-lg-6 will create a section 50% wide
and so forth.
So to create the right placement of your divs or sections. add a row class to every section that is stackable.
If you are having two sections side-side inside this row, add a col-lg-6 to each and they will line up next to each other and on top of each on mobile.
Now, to the obvious problems that I saw right away.
Between your body tags, create a wrapper class div that will contain your page and define it's width.
Do not use so much positioning. Specially position:fixed. This is what makes things sticky and messy. You wan to make use of your margin, padding, floats, and displays properties to properly align things.
Give it a try before I hand you any code. I want to see your brain work first. Then we'll trouble shoot some more.
Related
I lifted the code to create a horizontal card for my band's website which can be seen here:
http://www.jukeboxjunkies.rocks/Song
I really like the look - but when the cards are viewed on a mobile device, the rows stack and I don't like it as much.
The version I like
vs:
the version I don't like (shows like this on smaller devices)
So, 2 things...
How do I prevent the rows from stacking?
I need to add a link on the far right that will just say "Request" - This will show up based on a setting in my database (basically if I turn on requests for the gig) - I am not worried about the styling, I can do that later (although I just will want it centered top to bottom of the card). But I need help with bootstrap code to show or not show.
I can put the HTML code in here - but it can be seen on the site - let me know if I need to post it here and I will.
#1
On the card, change d-sm-flex to d-flex. d-sm-flex is not getting triggered on breakpoints below 576px, which happens to be most Portrait oriented mobile devices. Also, you don't want flex-wrap set, at least for mobile, since you seem to want the content side to stay to the right and not stacked beneath
#2
It looks like you already have it below the card within the card-footer, which automatically uses text-align right across all breakpoints. Is this not what you want? From a UI standpoint, user behavior is more inclined to right-aligned buttons hence why the hamburger is on the right side.
For tablet+, IMO having the request link below is also acceptable. But you do have a lot of horizontal real-estate to use so you could get away with the following adjustment:
.card.flex-sm-column.flex-md-row
.card-footer.align-self-md-center
I would also recommend that if you make any CSS selector adjustments, don't make them directly on the .card selector. Add another CSS class to these specific cards, like <div class="card card--song" />, so that you don't override the global .card styling provided by bootstrap and instead override it at a component level (.card--song).
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
I know how to change stack order using push-pull classes, but as far as I know (and tried) it only works if you have two columns.
In my design I have a container with a box nested floating on the top-left. I would like it to be under the container content when viewing on mobile.
Here is a sketch of how it is on desktop: https://db.tt/nZGvCih0
And this is how I want it to look on mobile: https://db.tt/Td6PlwT5
Right now the box is on top of the container content.
(I'm using Bootstrap 3 and prefer not to use js)
I think you can hide divs and display another div while loading on smaller devices .Check this link out it may help you
http://getbootstrap.com/css/#responsive-utilities
Thanks
Which you are seeking is a 'float: bottom' css and alas my friend, there is none (Ref: How can I position my div at the bottom of its container?).
There are several alternatives which you can consider:
Create two divs 'content', one for mobile and one for desktop. You can hide them respectively by using the responsive utilities mentioned by #sunilkjt.
Use CSS3 responsive media queries to do a 'position: absolute' on the div 'box' when on mobile, hence placing it at the bottom.
If you provide us with your html/css, i can create a jsfiddle that suits your needs.
All I look for is a simple sidebar for a simple website. Google results have everything about sidebar except for creating a simple side bar with minimal codes. They are so confusing, Still I have no idea about how to create a side bar. Should I use aside tag or using div? There is no clear explanation. One might help me telling what way they usually use.
My default CSS is twitter bootstrap
Since you're already using Bootstrap, you could just use the container-fluid class, which should generate two columns for you - the leftmost one a sidebar. Just add some additional CSS to add a border on that column and you'll have your sidebar in at most 4 lines of CSS code.
See "Fluid Layout" here: http://twitter.github.io/bootstrap/2.3.2/scaffolding.html#layouts
you could check this link for more info http://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/
depending of what the content is on your sidebar you could use if the content within the sidebar is related to the content in general the aside is a good option. If it is not the you could just add a new div and style it. Another option is to use if the aside doesn't quite fit the bill.
Tried to use twiter bootstrap
to create a top nav-bar in my master page.
http://jsfiddle.net/ZqCah/1/
I have some bugs and would appreciate some help:
1- I want to turn all my content to be rtl.
meaning My site will be the most right and register will be the most left.
2- The items are at different hights.
How can I align them to the middle of the bar?
3- I want to add an my site logo to the bar, as seen here
ask assitance for html page tabular layout
can it stick to the screen like the bar itself?
can it share the size with the bar itself?
Bootstrap now (3.3.5) supports RTL! all you have to do is replace all "left" with "right" inside bootstrap.css file (or better, directly on the "less" source files). The carousel maybe needs some tweaking, but 99% of the stuff works fine. Here's an example
If you want to create RTL website with twitter bootstrap you can use RTL version of it.
http://pyjamacoder.com/2012/02/01/twitter-bootstrap-v2-rtl-edition/
and
https://github.com/donaldducky/bootstrap-rtl
I create webpage with these
sushiant.com created with rtl version of bootstrap
You may want to explore the use of FLOAT and POSITION in your CSS. Try to separate each of your elements inside DIVs and experiment on FLOAT and POSITION properties.
For example, your number 1 question...you can put "my site" using:
<div style="float:left">my site</div>
<div style="float:right">register</div>
You can refer to this positioning tutorial http://www.barelyfitz.com/screencast/html-training/css/positioning/