I'm helping a friend with a website and need some advice. We asked here before, and were told to update all the necessary jQuery files on the server, done that, but still broken.
Website: 3six-d.co.uk
If you go to the portfolio, you will see all the pictures are out of line, not the rows, but the columns.
I'm using this to set the spacing:
<div class="col-md-4">
<a class="fancybox-test" data-fancybox-group="thumb" href="images/portfolio-03.png"><img src="images/portfolio-preview-03.png" alt="" /></a>
</div>
Just to be clear I have upgraded from Bootstrap 2 to 3. But I have followed the instructions and upgraded all the syntax's. (I hope anyway) But still no luck, they just won't line up as they used to (Gaps between the columns and pictures of equal space).
I have done abit of research on this myself, and all that I can find is that they must all by in the container div, which they are.
This is driving me crazy, so I would love some help!
Thanks
You could just add the following CSS to your images.
.fancybox-test > img {
width: 100%;
vertical-align: middle;
}
The vertical-align: middle property removes the padding at the bottom of the images.
Your columns are set at 31.6% width each, which is coming out at 340px wide. The preview images are 460x300 so are all overlapping. Set them a size or better yet upload the correct size.
Is this what you expect? If yes, just add following rule to your CSS
.fancybox-test img{
width:100%;
}
<div class="col-md-4">
<a class="thumbnail" href="images/portfolio-03.png"><img src="images/portfolio-preview-03.png" alt="" /></a>
</div>
What's wrong with native thumbnail class of bootstrap?
Related
Here is my site :
<span class="field-content"><div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
Arsenal
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150">
</a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep">
<h2>
West Brom
</h2>
<img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150">
</a></div></span>
You can see 2 logo on top of site (div.field_home_team-wraper and .field_away_team-wraper), i want it stay in one line, so i set it width:50% and inline-block, so here is what i want to display:
But, sometime on PC browser and alway on iPhone browser, it will display like this :
I know there are white-space between two inline-block div, i removed it, you can look at source code to confirm. I don't know what problem here, please help.
I just inspected the code on your site and I can't recreate the issue you're describing above. However, I did notice that there are a few lines of code that chrome isn't agreeing with - maybe try and resolve some of those issues to see if it fixes the problem on your end.
My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.
But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.
Here is my question will more explain : Browser image render break css inline-block layout
This is a known bug.
Display: Inline-Blockcreates spaces between elements.
Here are two ways to fix this:
First way, if you use display: inline-block, always use margin-right: -4px to fix the spaces between elements.
Second way, use font-size: 0 on parent <div> to remove spaces, and on elements inside <div> reset the font again to the size you want. Example: font-size: 16px
And another tip, be sure to use Box-sizing: border-box, so whatever if you put borders or margin or padding, doesn't affect the width in percentage...
Exact instructions: Insert a style to float all img elements belonging to the irregularWrap class on the right margin, but only when the right margin is clear of other floating elements.
I'm not really sure what this question means? I get the float property but whats does it mean by only when the right margin is clear of other floating elements?
<img src="images/student1.jpg" alt="" class="irregularWrap">
<img src="images/student2.jpg" alt="" class="irregularWrap">
<img src="images/student3.jpg" alt="" class="irregularWrap">
<img src="images/student4.jpg" alt="" class="irregularWrap">
<img src="images/student5.jpg" alt="" class="irregularWrap">
So those are the images, basically, its one images cut into 5 seperate pieces horizontally to make the words look like they kinda outline the image around the left edge.
The CSS I currently have is:
.irregularWrap { float: right; margin: 0px; }
I'm not sure if I'm just overthinking this due to my brain being fried trying to prepare for finals or if this is really just something we didn't quite cover. Any ideas where I'm messing up here?
This is what all 5 images should look like when they come together as the one picture.
to clarify, this is what I'm getting with the 5 images, instead of them looking as they do in the previous image
In the CSS I needed to add
clear: right;
As I explained in a previous comment, I forgot to change the stylesheet link to include the folder on my html sheet so it was throwing my entire game off. Like I said, brain is probably fried. Lol.
Thanks for the help guys!
You could try:
img {
display:inline; // or inline-block;
}
There is a set of images (more than 3):
<img src="http://path.to/my/img1.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
If you don't apply any styles, they go in a row (if space allows to). That's fine, however I want the last 3 images always appear on the next line. Is it possible to make it using pure css?
I've found a close solution:
img:nth-last-child(3){display:block;}
However, it breaks the images in three lines (that makes sense as it is display:block for third image from the end).
jsFiddle example
Looking for a pure css solution.
Thank you.
use
clear:both in css for last three images
img {
float:left;
}
img:nth-last-child(3) {
clear:both;
}
DEMO
I have to transform a given webdesign into an template for an CMS.
While I was doing this, I realized, that the design did screw up in Firefox:
I'm not really deep into webdesign, but I was able to narrow it down to a div (.inside) which contains two further divs (.titel and .logo) and a <figure> that contains an <img>.
In Chrome (Version 33) and IE (Version 10) the image is rendered under the two divs (As it was intended by the designer) - in Firefox, the image is inserted right in line with the other two elements.
See the difference:
https://imagizer.imageshack.us/v2/249x342q90/34/e5yj.png
I prepared a jsfiddle:
http://jsfiddle.net/5zu32/embedded/result/
rough code:
<div class="inside">
<div class="titel"></div>
<div class="logo"></div>
<div class="main_image block">
<figure class="image_container">
<img src="foo" alt="img test" height="323" width="853">
</figure>
</div>
</div>
I tried to remove the "block" class (which only removes the overflow:hidden) but that screws up the original design. (It does not do that so clearly in the demo.)
(Picture of horses is a random internet image that happens to have the same size as my used image)
I hope somebody could help me? How can I fix this?
By the way: I'm new to the site, if I did anything wrong, please tell me :)
Try using
.main_image {
clear: both;
...
}
This will clear the float: left you used earlier.
BY adding a clear: both; to your main_image class you can clear out the problem with the display.
DEMO
I wanted to make a site with the grid system. ( I have made one already, so I know/knew how it works )
This is my custum grid: http://grids.heroku.com/grid.css?column_width=100&column_amount=8&gutter_width=15
And now comes the problem: When I try to put prefix_1 as a class nothing happen it just stays in the same place. And I have one prefix_1 grid_3 and one grid_4. so it is 1+3+4=8. My grid is 8 columns wide so it has to fit together easily, but it doesn't.
http://jsfiddle.net/gekkeabt/5LA82/
<div class="container_8">
<span id="download" class="prefix_1 grid_3"><b>Download</b> Leasy CMS</span>
<span id="download" class="grid_4"><b>Download</b> Macha Webserver</span>
<span id="about" class="prefix_2 grid_4 suffix_2"><b>About</b> Me</span>
</div>
I checked my code 100 times. But I can't find where it went wrong.
Maybe someone can help me out?
Thanks!
EDIT:
I solved the prefix and suffix problem by defining the class in another div outside of the span.
So it looks like:
<div class="prefix_1 grid_3"><span id="download">The content....</span></div>
Try removing the
padding:10px 50px 10px 50px;
line from your #download,#about CSS declaration (or at least the horizontal padding of 2 x 50px).
It's that extra padding that makes the elements wider than one row.
Here's how it looks without that line: http://jsfiddle.net/WHG4u/
Please add this css to your /css/custom.css to make the page stop jumping each time the slide changes
.avia-content-slider-active .slide-entry-wrap { height: 275px; }