I have used the bootstrap album as a starting point to create an album.
The problem is that last image in each row is larger than the first two.
I have checked the css code but unable to identify the issue.
Here is the link to my page
brotherxii.com/aquariangallery.html
Add this on your CSS
.card > a > img{
max-width: 100%
}
Related
I am currently using this code which fixes the image next to the first image. But the third and forth image are not aligned with the first image. It is only the first line that has the problem. Images on the second line all line up correctly.
ul.products li.product:nth-child(2n)
{margin-top:-25px;}
When I use this code it fixes the image next to it but throws out the image in the second line.
Here below is a link to the page that has the issues.
http://www.secsa.co.za/fingerprint-readers/
Please can some point me in the right direction. Thanks in advance
Having inspected the issue area via developer tools, the problem may be resolved using display:flex; flex-wrap:wrap assigned to <ul> containing product list and removing margin-top:-25px from the li.product:nth-child(2n)
This should fix the problem across all areas of your product list , you may refer to the link of video attached for better understanding:
https://www.awesomescreenshot.com/video/1021817?key=a7eff6742ac925aa9179172b4e03772c
This will fix your Problem.
ul.products {
display: inline-table;
}
I have a problem on my wordpress blog with the way posts are shown on the main page, and I think it's due to the size inside css/html, but I don't manage to find a solution. I'm asking for help.
The blog can be found at the URL: http://pavilionmagazine.org
As you can see on the main page, each post has the same size (due to css .post height: 600px; but when you mouse over they change size). I've managed to make the photo size the same, the excerpt to be the same number of characters, and the .post box is 600px high.
However, when you mouse over the posts they change their size and some of them (2nd, 5th, 8th posts from below) switch position. Why is that happening?
Because of each posts' size the grid has errors in it.
Why can't the posts be aligned, occupy the same size and make part of a nice fluent grid?
Thank you in advance :)
.post:hover needs to have a fixed height. Take a look at the two:
.post:hover {
height: auto;
}
.post {
height: 600px;
}
The auto height of post:hover right now is overriding your fixed height on .post.
As for position, inspect the two and see what else is being overriding by the hover values. Keep hover overrides to a minimum.
It seems that the .post boxes height is set to auto on mouseover.
So you have to edit your style.css file, line 350 and delete the css rule: height:auto;
Also, there are a lot of duplicated css rules on .post:hover. You can delete all and try this:
.post:hover {
background-color: #eaeaea;
}
I have a design which I am doing with twitter bootstrap 3.
I have a grid of images. When I click one of the images, I need the ones below the row of the clicked image to slide down to open a div that would show description of that image.
Something like this link.
I couldn't make this example to work with bootsrap 3.
I need some help with this.
Ok I got this far.
Click this link for bootply link.
I got it to work in the basic level but now I'm having some trouble with the css. The boxes switch places. Also if I change the css of .og-expanded to float: none;, the third div drops below the slide.
.og-expanded{
float: left;
/*float: none;*/
position: static;
}
You can try something like this..
http://bootply.com/133532
It uses jQuery to show/hide the appropriate hidden description following each row of images. You'd need to add a larger 2nd version of each image in the "description" cells.
Could somebody help me to identify the reason why responsive table is not full width despite the instructions?
Please check this documentation page for the problem found in the first table on the page, http://view.jquerymobile.com/1.3.0/docs/widgets/table-reflow/.
In css it has width=100% applied, but the table is not full width.
It seems I found the problem. The table has this css
.ui-table-reflow.ui-responsive {
display: table-row-group;
}
And if you remove this or change to display:table. Table starts to occupy the whole width.
I'm giving new life to a boring web page. Please see what my template should look like here: Correct body page
Pretty page!
Now - when I go to add my existing background / menu/ footer - I am somehow loosing my container image -
/* structure */
.container {
background: url(/img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 702px;
position:relative;
}
I removed position:relative; (but it still failed). Please note I'm having to use a web content manager only because I have no other access to site. For this reason - my css sheet is in the middle of the page.
This is how the page looks now w/missing bgcontainer.gif:
Current page
Please help - thank you
With the help of firebug I can see that the html structure of the two pages is quite different. On the "good" one you have a ".container" div as a wrapper of most of the content, you can see it here with the black border:
But on the "wrong" one you have a "#container" div in the same position and another ".container" div further down, nested inside that "#container", and it wraps that header only.
The "#container" div of the "wrong" page spans the whole witdh.
By the way, I like your design.
EDIT:
This is the look of the page with float: left; and left:107px; added to the ".container" div.
Here's your biggest problem:
The structure of the HTML pages is MUCH too different to pin this problem on one single line of code. In the "old" page there are 5 stylesheets including your own; in the "new" page there is only one stylesheet.
The reason your old and new pages don't look the same when you add your default.css stylesheet is because the old page has FOUR other stylesheets also applying styles, many of which are overriding your own.