thank you for your support. I have created one litte bootstrap page.
I have only two little problems. The logo position on the desktop browser is different to the position on the mobile device (iphone).
i found out that if you change the css code "bootstrap.min.css" from the container-fluid - padding-left:15px; to padding-left:0px; the logo will be at the correct position on the desktop browser but on the wrong possition on the mobile device.
sample image
do you have any ideas to solve this problem?
The reason why you are experiencing this is because twitter bootstrap utilizes media queries. A media query essentially allows for a css class or id to have differing stylings for different screen widths.
To fix this you could go in and alter every media query in the minified code to fit your requirements. A better solution however, is to write your own css in a separate file that over rides the bootstrap.
Example
So here is a div with container fluid
<div class="container-fluid example">
// your div content
</div>
Here is your css that will override the padding left.
.example {
padding-left: 0px;
}
Related
Need some help figuring out why the bottom images keep pushing out. I have a responsive grid layout and developing a personal webpage. Images are setup to display in a 4 column layout with a media query set up to change to a 2 column layout # 800px. When I resize the browser width by dragging the edge, the layout breaks then resolves itself on and off every few px the window is reduced by. E.g. at 800px the layout is good, 799px it breaks, fine at 797px and so on. Why is this happening?
Link to the page HTML and CSS
<p data-height="265" data-theme-id="0" data-slug-hash="VMeJMq"
data-default-tab="css,result" data-user="smedz28"
data-embed-version="2" data-pen-title="Media query breaking"
class="codepen">See the Pen
Media query breaking
by Marc Smedley (#smedz28)
on <a href="https://codepen.io">CodePen
</a>.
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js">
</script>
codepen
As the images in the codepen have no source, it is not possible to replicate the behavior.
Using the DOM inspector, all images have max-width:100% property defined. Due to the CSS Box Model, this might lead images to be greater than 100% width, as they also have border:3px set.
Try adjusting the max-width to compensate for the borders:
img {
max-width:calc(100% - 6px);
}
or
img {
max-width:calc(100% - 6px) !important;
}
If you need to force an override of other selectors.
So it looks like jae.phoenix was correct with the image size in a way, it wasn't so much the container size and HTML/CSS. It was the actual image sizes that were breaking the layout.
I resized all images and the layout seems to be working perfectly
Reduce the width of your images to see if that solves your problem? – jae.phoenix
I really can't explain why this is happening but I am building a WP theme in BS3, for some reason, on the tablet viewport (768 to 991px) my links stop working. They are not clickable, tappable, tab-able, etc.
What causes this strange phenomena? How do I even diagnose when my site is W3C Compliant?
Ugh... the horror!
I really don't have code to support this, but I could paste my entire page on here. I will do that on request, or my CSS file, etc.
When using bootstrap .col-* DIVs should reside in .row DIVs and in turn .container DIVs. I can see in your html that you have 2 top level DIVs with a class of .col-*, and they have different screen sizes associated with them. Your footer DIV has a class of 'col-lg-12 footer area' which means when it gets below 991px it will stop floating, while the rest of your content floats, which is whats causing the issue.
If you change the footer class to: 'col-sm-12 footer area' - this will solve the issue.
But what you ideally need to do is remove the col-sm-12 from your footer and page-wrap altogether and replace it with 'container' so they look like: <div class="container footer area">
I am creating a feature for my responsive website. It consists of an image carousel which contains a caption. On desktop, I am displaying the caption absolutely. The div, which contains a header and paragraph, is positioned on top of the image and takes up a width of 40%.
When the user is using a tablet or mobile I would like to display the caption relatively with a width of 100%. This makes the text appear under the image which is more suitable on the smaller screen sizes.
The two ways of doing this would be to duplicate the code with different css classes - one relative with the visible-desktop class and the other absolute div with the class hidden-desktop. The other way is to use javascript to toggle a class.
I was thinking, it would be great if I could achieve the above using purely css. Something like .desktop .carousel-caption { Is this at all possible.
You could maybe just use media queries and enter your different code in the relevant media query. Bootstrap's media queries are detailed here
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
I'm trying to shrink the navbar height for mobile sizes. What I've tried shrinks the navbar, but the JS menu doesn't function. Any ideas?
.navbar-fixed-bottom { height:35px; }
If you download the custom version or you are using the less css, just change the #navbarHeight variable to desired height.
You can, of course, change it manually, but it will have to be done in multiple places. Use navbar.less file to look for all the references where #navbarHeight is used.
I also didn't see the fact that you wanted to do it only in the mobile site. The .less file for the navbar for the responsive design is responsive-navbar.less. The height is the same for both desktop and mobile navbar, and there is nothing set specifically for the mobile one, but without a bunch of testing I wouldn't recommend changing it.
in my page using jquery mobile I have a div and I would fixed the width without it depends to the devices where it is showed.for example in my iphone the div is showed correctly because the screen is small while in my ipad the div takes all the screen and it is really bad...how can I fixed its position?
<div style='width: 100px'></div>
This is just general but you want to look at CSS 3 media queries to customize your layout specific to a device.