Am beginner in coding. I have designed a landing page. The landing page looks fine in website but divisions are overlapping in mobile. Kindly check and advice how to resolve this problem?
Landing Page Link
Thanks in advance
You have an inline height of 3px on your ul id="grids".
Remove that or set it to auto and its should stack properly.
you are using bootstrap the columns must wrap with row class and row should be warped in container or container-fluid classses
<div class="container">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
OR
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
</div>
</div>
change bootstrap nav use this one [http://getbootstrap.com/examples/navbar/ ] it's batter to responsive and mobile devices .
Related
Previous problem was fixed but there is a new problem slider not working.
I tried searching on web but found nothing .
my website link is https://testslidertk.blogspot.in/
Slider Not working.
Link of theme code={https://drive.google.com/open?id=0B3Pa6kznMKqZM1ZGX21ObHRra0E}
It would be great to have the code, not just images. But even by the images it can be seen that the problem could be in the height of the images. Fix the height of the containers (set it on some fixed amount) and set image style to max-height:100%; and max-width:100%;
I think that should do the trick. If not please add html of the grid for a correct answer.
<div class="col-md-12">
<div class="col-md-4">
<div class="col-md-12">
Card A1
</div>
<div class="col-md-12">
Card A2
</div>
</div>
<div class="col-md-4">
<div class="col-md-12">
Card B1
</div>
</div>
<div class="col-md-4">
<div class="col-md-12">
Card C1
</div>
</div>
I am using bootstrap. I m having header and footer, in between that I want to show side bar on left side. I am new to bootstrap and angular js. please guide me how I can build this type of structure.
Try this....
<div class="container">
<div class="row">
<div class="col-md-4">
Sidebar
</div>
<div class="col-md-8">
text
</div>
</div>
</div>
Also learn basic Boostrap: http://getbootstrap.com/
I don't really understand your problem there Priyanka kakade.
If you want a navbar on the left of your content, you can use this kind of structure between header and footer :
Example :
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-md-2">
<!-- navigation -->
</div>
<div class="col-xs-8 col-md-10">
<!-- content of the page -->
</div>
</div>
</div>
I recommend you use xs (mobile display) and md (desktop display) classes together, otherwise your navigation would be too little on mobile devices, or too big on computers.
I have a problem working with Bootstrap and Safari.
I want to place a fixed div relative to it´s parent and it works in all browsers except Safari.
The same problem is explained here:
https://github.com/lionheart/openradar-mirror/issues/147
Now i try to find a good workaround:
Original Code (does not work in Safari)
<div class="row">
<div class="col-md-8 col-md-push-4">
<div class="fixed-div">SOME FIXED CONTENT</div>
CONTENT A
</div>
<div class="col-md-4 col-md-pull-8">
CONTENT B
</div>
</div>
css:
.fixed-div{
position:fixed;
}
this does not work as expected in Safari. The "fixed-div" is not "pushed" like it`s parent. It should be displayed above "CONTENT A".
I found a solution but i think this is not a clean one:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="fixed-div">SOME FIXED CONTENT</div>
</div>
<div class="clearfix"></div>
<div class="col-md-8 col-md-push-4">
CONTENT A
</div>
<div class="col-md-4 col-md-pull-8">
CONTENT B
</div>
</div>
Do you have some better ideas how to fix this?
Try switching to the CSS property from fixed to absolute. If that does not fix your issue you could add custom check before within your HTML to see what browser a user is coming from and load that specific CSS page How to use different CSS for Different Browsers.
I have been experiencing this subtle oddity in my handlebars template using bootstrap.
The issue is that the entire contents of the page shifts approx 10px to the left when three or more items are in the database (the code within {{#orglist}} occurs three or more times).
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
<div class="col-md-12">
{{#orglist}}
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
{{/orglist}}
</div>
</div>
The same issue occurs if I manually do the markup:
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Some notes
The issue is independent of custom css.
The reason this issue bothers me, and how I noticed it, is that
it's a multi-page site and it causes the alignments to differ.
This template does have an accompanying layout template, but the issue appears to be independent of that.
Any thoughts?
Solved: see approved answer below
Fix is Ruben's answer here: How to prevent scrollbar from repositioning web page?
Largest ratio of time searching for issue vs. solution ease I have ever had.
browser vertical scroll bar show-up when rows >= 3?
As per bootstrap standards, one 'row' should be placed within a .container or .container-fluid, also div can have 12 total grids. for ex
<div class="container">
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>...
</div>
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. Please refer:- http://getbootstrap.com/css/
I am having a go at Twitter Bootstrap 3 for the first time and seem to be getting stuck when it comes to the grid system.
I am ok when it comes to using rows but I am trying to achieve a simple layout like the below image..
I can't even work out how to begin! Does anybody have a link to a jsfiddle or similar I can have a look at to read up on?
Use this structure:
<div class="container">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</div>
</div>
Essentially you create two columns, and in the second column you are creating a new grid to hold your four cells. You can change the md in col-md-6 to break at the resolution you need.
jsFiddle example