I had lightbox on my site and it was working fine. I updated the pages with Dreamweaver CS6 to a Fluid grid with a side navigation bar so the site would be more mobile friendly. The result is that my lightbox images are distorted and the frame is missing from one side. When scrolling through the images they will increase in size by a fraction and distortion will lessen. I figure there is a CSS conflict and I can't figure it out. Web page is located here,
http://www.crawfordcountyhistoricalsociety.org/Pages/Indians.html
U should remove this style, max-width:100% and padding: 10px.
Related
I just finished my new custom Bootstrap Wordpress theme and added a carousel. It works fine, except it's not responsive. The images get pulled out to an unwanted height. I tried everything, but I can't seem to fix it.
Here it is on my website (with uncompressed css): http://your-juliet.net
Does anyone have a clue? I won't mind removing the caption on the carousel in smaller resolutions (but I rather not). Thanks so much!
Fixed, deleted all the custom styling and put the carousel in a col
When viewing my website from an iPhone or iPad my site displays just fine when scrollbars on present. However, when you access a page when scroll bars are not needed the display gets messed up. I have no idea how to resolve this issue. Any ideas?
For an example my website is www.surfboardswap.com. The homepage appears fine on a mobile device. But if you access www.surfboardswap.com/alerts the display does not fit on the page since scroll bars are not needed.
Thanks for the help!
It looks to me like both those links you provided render with scroll bars depending on the width of my browser screen. I think you're ultimate issue here is responsive design.
You have a width set on your .container css selector. This is breaking the responsiveness of you're site, because it's being forced to that width even on smaller screens. Try removing that!
I have tried almost all the techniques to apply sticky footer to my site i am using Gumby Responsive 12 column 960 grid system but my page always show a lot of extra space after my footer here is the link to the PROBLEM Page
The problem only exists if you activate JS. No such bottom margin when you deactivate it. So the problem is voluntarily caused by an instruction somewhere in a script.
I'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.
I'm using wordpress lightbox plus plugin: http://www.23systems.net/plugins/lightbox-plus/
And it's working well but the problem is when viewed on google chrome, scrollbars appear on the lightbox overlay image.
Here's the link:
http://goo.gl/2Yy9L
Note: click on the 3 mini images at the bottom [ this is where lighbox plus is applied]
On the div with id cboxLoadedContent you have overflow-x and overflow-y set to auto. The content doesn't quite fit. You can either make the content fit in its container thus avoiding the scrollbars or you can apply overflow: hidden which will dispose of scrollbars entirely. Of course some of the image could be hidden. It looks good though so I imagine it is just a pixel hor/vert and won't be missed.