I made a website using Twitter Bootstrap.
http://www.photous.org/en/pictures
It works fine on desktop browsers but on the mobile browser (I tested on iOS Chrome) the left margin and border disappears.
I understand that the initial load hides the side as the width doesn't fit but even if I zoom it out the lost margin & border don't come back.
How can I fix it?
Thanks.
Sam
Please include all the code inside
<div class="container-fluid">
Your code here....
</div>
Now your website will become responsive..
Related
I've been probably overthinking this and trying out too many things incorrectly..
http://testserver.glow-berlin.de/kurzfilmwettbewerb
this is the website we're talking about.
At the bottom (right above the footer) you find an image that is supposed to stick to the bottom of the pink box.
Whenever I check it on mobile, the image offsets outside of the box. I built the section using the grid system but struggled with it, so I removed it for mobile... I just couldn't figure out the problem. Now – without the grid system – the same problem appears. On Android it seems to work fine but on iOS the image jumps out of the box again. When I fix it for iOS the problem appears on Android.
Any help with this?
The background-attachment: fixed; style on your div with the ID #gutfilmer is the problem on iOS.
'background-attachment: fixed has been disabled on iOs since it costs a lot on mobile browsers.
If you remove it the filmflap stays on the pink background.
try
#gutfilmer {
overflow:hidden;
}
This page has a content area where all the posts are held and a side bar. The content and side bar menu are sized properly and fit where they're supposed to in Chrome with the actual posts area taking up the left and the sidebar sitting on the right.
In IE, the images are full-width and I'm not sure of a better way to fix this.
The same issue was occurring where the images were full-width and adding the width:100% attribute to the .htheme_post_image img element seemed to fix the issue. If you view in IE, the two areas are side-by-side. However, if you click on a post.
The side menu is underneath the post and the images/text are full width.
If it helps, I'm in IE 11.0.9600
It seems to be fixed if you remove display: table; from both the .htheme_container class and the .htheme_content class.
This seems to fix your IE issue and has no effect on Chrome, so maybe it's simply not needed. But I did not create this theme, so I have no idea of any side-effects this may cause.
I have built a website that works perfectly, but I am experience a very odd problem that I can not fix no matter how much I play with the code.
Each page in this site has a side-menu on the left. The following is an example:
http://mtschools.net/cadences
It works fine in full window viewing, but when you re-size the window to <= 768px, the side-menu moves to the center top (as it should), but the bottom link of the side-menu, in this case "Interrupted Cadence," stops working.
Does anybody know how to fix this?
Many Thanks.
I think you should put a higher z-index at the left-menubar div.
For example:
<div id="left-menubar" style="z-index: 99999;">
It worked when I tested on my Chrome.
I'm struggling with this website I made using webflow.io
It displays perfectly on desktop, but on mobile I get a white margin or padding on the right side that completely damages the site. I've tried to debug the code but can't find the culprit.
Any help would be appreciated.
The problem seems to be coming from the "Describe your app" section image sliding in from the right.
Adding overflow:hidden to the parent element should fix this or work on making the image absolute.
I'm trying to add in space to compensate for the height of the navbar in Twitter Bootstrap 3. I'm doing this by adding in
<br>
While this line break appears in Firefox, it does not appear in Safari or Chrome. Full code can be found here https://github.com/srohrer32/beamformer/tree/gh-pages, under index.html. I'm asking how to either fix this problem in Chrome and Safari, or a better way to scale all of the links within the page up by a fixed px value so the navbar doesn't obscure some of my content.
This should do it:
<div class="clearfix"></div>
<br><br>
probably <br/> will work? :)
You should have ending slash for every tag