I am using lightbox to display the large versions of multiple thumbnails on this website.
So the best way to describe my problem is to follow this steps below.
Click the second image - notice it loads with a width of 100%
Close the image and click on the first image followed by clicking on the right arrow to display the second image.
Notice how the width of the previous image is retained making the second image (after clicking next) is very small.
I imagine its a css / js issue any help would be much appreciated.
It is a css problem probably caused by bootstrap,
if you are using bootstrap add this line in your lightbox.css.
.lb-image{ max-width: inherit; }
Cheers!
Related
I made my first Wordpress for learning purposes. I have downloaded Themekraft, and I added my own customized bootstrap header navbar, because I want to customize as much as I can.
I have some sections (only "inicio" and "articulos" are working), but when there is an article with photo (sometimes without photo happens the same), I have realised that blue navbar moves.
I tried to fix it in many different ways (adding a max width for the body
and navbar, deleting a lot of margins and/or paddings...), but I have only discovered that it is a problem of paddings... I think.
I mean, when I add, for example, a padding-top:10px for the body, everything seems to be ok... until I have an article or two. When it happens, it seems i have to add more padding-top on the body in order to "fix" the problem.
I have searched on SO suggestions, looking for some clues, but I found nothing.
Bootstrap navbar moves right on scroll
Bootstrap navbar covers top of section when linked
What could I do? I have uploaded the site to a server so you can check it.
http://pruebaint.esy.es/
As far as I can see it the issue is not any of your padding. Its the scroll bar that is causing the problem as the content moves somewhat to the left. If your page has lesser content without vertical scrolls you will not see the nav moving.
Is there any other problem that you see apart from horizontal movement?
I'm a novice / beginner and I am trying to create a html page that has images that when you click on them, a text box pops up and provides information. The text is about 150 - 200 words and I want the pop up boxes to be responsive.
After a lot of time spent on this, the best solution I found (at my beginner level) was to use a modal box with scroll bars (due to the amount of text to read). I have used this code / guide:
http://www.w3schools.com/howto/howto_css_modals.asp
and I amended line 8 in the code from absolute to relative because the original version does not allow the scroll bars to scroll to the bottom to read the text fully when I used the code and tried it for myself.
.modal {
display: none; /* Hidden by default */
position: relative; /* Stay in place */
I have uploaded a version here with the slight amendment.
http://sugastore.com/test/modal-textbox.html
However, I want to have multiple modal text boxes on the same html page and I do not know how to do this. I have been reading online and the information about numbered div ID's but the information has been too advanced for me to understand.
My question is:
Q1. How can I use this modal code to create multiple modal boxes on one page? (and for them to be responsive)
Also, but not so important (I am sure I can find a way from reading online, but will ask here as well).
Q2. How do I change the link from a button to an image, so you click on an image and the modal box pops up?
Q3. When I change the modal from absolute to relative (as detailed above) the semi-transparent black background does not fit the whole page, is there a simple fix to amend this?
I also welcome anyone who already has a script / code example for a simple responsive multiple modal text box pop up (upon clicking an image) that is responsive and allows for scrolling to account for a lot of text.
Try this:
Q1: You can use the code to create multiple modals but you have to give them different ID's. eg #myModal, #myModal1, #myModal2 or better still name them according to what they display. They should be responsive as bootstrap modals are designed to be responsive
Q2: Replace the button tags with image tags and give it the ID "myBtn". Clicking on the image should trigger the modal
Q3: Change the relative to fixed. This should solve the problem.
I'm fairly new to HTML and CSS work but have been very proud of how far I've come with the help of forums like this one. So first and foremost, thank you!
My question: I am using a Colorbox on my website that displays a popup on top of the current page. The problem is, if I scroll with the mouse wheel and the pointer is resting in the grayed out area (the original page I opened the colorbox from), the original page scrolls down...thus eventually moving the colorbox off the screen.
What I want is for the colorbox to always be visible in the middle of the screen, regardless of how a user scrolls. The only way to get rid of it would be to close it.
I've read a lot about using the position:fixed attribute, and have attempted to do that but had no success (tried surrounding the colorbox with a simple div with a "position: fixed" setting). Plus in looking through various comments is seems like the fixed position is something that should be used sparingly, if at all.
Does anyone have a suggestion on a div I can create to keep the colorbox positioned on the screen at all times? Or maybe an alternative idea, like preventing the ability for a user to scroll down the grayed out area of the original page?
Here's a link to the page that displays the issue. If you click on one of the dozens of sample story links, you'll see the colorbox appear. When it does, start scrolling down the original page and you'll see the box eventually goes off the screen.
Any advice would be greatly appreciated everyone. Thank you!
The problem is that the Colorbox Javascript appends inline style to the box which will override external or internal CSS. Give your property values !important to prioritize.
#colorbox {
outline: 0 none;
position: fixed !important;
top: 10% !important;
}
This is very strange and I'm pretty sure it's to do with some sort of width issue in CSS, but as you start to re-size the browser, it adds this strange gap to the right (Which is off screen).
Here is the page in question
I've tried looking through the CSS and I can't exactly find anything, I keep going over and over it but it's not sticking out to me.
The website is WordPress driven, so most of the CSS is in theme.css and lessframework.css. The Sidebar is a fixed width at 202px and the Content is next to it, which has different width sizes based on what screen size. I'm pretty sure it's something to do with that but I just need a second opinion/set of eyes!
Can anybody help?
I hope im not bringing an old question back to life, but i find Firefox's developer tools have been invaluable in ascertaining, on-the-fly, what elements are actually displaying.
The easiest way is to right click on the area in question, and choose the last option 'Inspect Element'. This will open up the source and CSS console and displays the elements current id/class and style.
To go one better, once the console is open, click on the 3D box icon on the right of the console bar to make Firefox render the page in 3D, which will allow you to spin and zoom in on the affected area.
http://jsfiddle.net/PaulNLondon/dG3Gb/
The jsFiddle shows (I hope, it is my first time using it) where I've got to so far . . . I'm trying to use an image-based menu and a text-based rollover menu working together.
I wasn't able to show this in the jsFiddle but I am using images that are twice the height of the divisions where they are displayed and shift the position on hover to show the alternate version of the image - in the jsfiddle what I have done is simply colour the backgrounds of the divs to show their positioning. They are positioned very particularly to give a desired visual effect with continuity of one to the next. (The overlapping of the page title text and the first image block in the jsFiddle isn't an issue.)
My aim is to have hovering on an image turn on the thick underlining of the associated text menu item (I've used bottom border setting) as well as having the image shift to show the alternate image in the image menu itself . . . AND I want to have hovering over an item in text menu to turn on the underlining of the menu item text itself AND make the associated image in the image menu to switch to the alternate image.
I thought I was nearly there with getting the hovering on an image turning on the underlining but it seems that the div by div positioning I worked out only displays correctly using Firefox (as you can see the alignment hasn't worked in jsFiddle).
I'd appreciate any suggestions you might have - even if you are going to tell me that in your opinion my approach is all wrong. I'm at the limit of my CSS and HTML here. I don't really know any JavaScript (other than I have used it and jQuery for a slideshow I found at Dynamicdrive).
I got there in the end with help from the site I linked to in the comment . . . perhaps it is a bit image-heavy? I've published it at http://doublerollover.moyni.co.uk - I am, though, still puzzling about the links seeming to extend way below the menu.
I'd appreciate any comments about the solution and how I might have done it more efficiently.