I have a responsive 3x3 grid of video thumbnails that use pretty photo to lightbox vimeo clips. It works great at some resolutions, but as you resize the width of the browser window, it rapidly changes from 3x3 to this nonsense.
This is the offending CSS.
.thumb
{
float: right;
width: 25%;
height: auto;
margin: 2%;
}
.maincontent
{
margin:0 auto;
width:90%;
float:right;
}
And a snippet of the HTML if that matters.
<div class="maincontent">
<a href="http://vimeo.com/428525" rel="prettyPhoto" title="">
<img class="thumb" src="http://ftfrmedia.com/images/thumbnails/Overview-thumb.jpg" alt="Company Overview" width="60" />
</a>
I'm seriously stumped...
I think this is a problem with floats in .thumb and img.
Replacing the floats with display: inline-block should resolve the issue:
.thumb {
height: auto;
margin: 2em;
width: 25%;
}
img {
display: inline-block;
*display: inline; /* IE7 hack as it does not */
*zoom: 1; /* support display: inline-block */
height: 3em;
margin-left: 0.5em;
margin-right: 0.5em;
margin-top: -1.6em;
width: 3em;
}
Update
As pointed out by #DaveHaigh below, there is no need to use display: inline-block on the img element as this already accepts a height and width property.
Therefore, just removing the floats will fix this problem. If you would like to keep the right to left flow of the images then you can add direction: rtl to their parent:
.maincontent {
direction: rtl;
}
The downside to this would be that it would also flow any text right to left, but this does not appear to be a problem in your website as you are not using any text within the .maincontent element.
remove the floats on the .thumb and img. And also replace the margin: 2em; on .thumb with a percent value e.g. 2%.
Related
I'm trying to make a responsive design were images scales according to the viewport, depending on whichever width or height of the viewport restricts the image, it never exceeds the viewport.
This was quite easy to achieve, but now I have the issue that the left-aligned title over the images doesn't of course follow the center'd image, but instead sticks by the page margin. I tried experimenting with all sorts of different calculated padding and other junk, but so far I can't figure it out.
What I'd ideally would like to do is to scale a box according to the viewport and center-align that box, and then have a full width image inside the box, and the left aligned title above it.
Here's what I've got so far, excuse the crude CSS.
Code:
/* Create 1 column that floats */
.column {
float: center;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Add a card effect for articles */
.card {
background-color: var(--bg-color);
padding: 1vw;
margin-top: 1vw;
cursor: pointer;
width: 100%;
border-style: none;
}
.card h3 {
color: var(--text-color);
font-family: 'Lato', sans-serif;
font-size: 3vw;
text-align: left;
margin-left: 1.5vw;
margin-bottom: 0vw;
margin-top: 0vw;
}
.card img {
display: block;
width: auto;
height: auto;
max-width: 95vw;
max-height: 75vh;
margin-left: auto;
margin-right: auto;
padding: 1vw;
}
<div class="content">
<a href="page.html"><button type="button" class="card">
<h3>Image Title</h3>
<img src="https://via.placeholder.com/1920x1080.jpg"
alt="Image Title">
</button></a>
</div>
Supposing you can change your HTML structure and you're open to use a more semantic HTML structure you should go with the following.
.card {
display: flex;
justify-content: center;
}
<div class="card" onclick="myFunction()">
<figure>
<figcaption>Caption</figcaption>
<img src="https://dummyimage.com/100/eee">
</figure>
</div>
I've also added the onclick="myFunction()" attribute so you can mimic a button behavour aswell.
You could also use <a> tag instead of the <div> tag, just set it to display:block.
Now a little weird hack
I do not recommend this approach as it is not semantic (you will have to style it on your own).
.figure {
display: flex;
flex-flow: column nowrap;
margin: auto;
}
h3 {
text-align: left;
margin: 0;
}
<button class="figure">
<h3>Caption</h3>
<img src="https://dummyimage.com/100/eee">
</button>
You can use this if you absolutely need to have a <button> tag and you can't change your HTML structure. If none of those apply, the only advantage of this method is that you don't need another wrapper.
Notice that if you change <button> to <div> in the above example it will not work as it relies on the fact that <button> is a replaced element, and so its size is defined by content width, just like inline elements, but its margin are calculated like block elements, so you can use margin:auto.
CSS Spec on 10.3.4:
The used value of 'width' is determined as for inline replaced elements. Then the rules for non-replaced block-level elements are applied to determine the margins.
Anyway, I was just sharing what I've found while looking for how to solve this without changing HTML structure. Please go with the first solution.
You could wrap the h3 and the img in a div and center that. By the way, float:center doesn't exist.
I have two inline-block elements (one <img> element and one <div> element) and the <div> element is pushing the <img> element downwards like so: image of issue
Here is the relevant code in CSS:
#audio-section #audio-links li img {
width: 46%;
margin-right: 80%;
height: 100%;
margin: 5% 78% 2% 4%;
display: inline-block;
vertical-align: top;
}
#audio-section #audio-links li #responsive-audio-text {
display: inline-block;
width: 45%;
margin: 100px 0px 0 400px;
float: right;
}
and HTML (with <img> inside <a> tag):
<section id="audio-section">
<ul id="audio-links">
<li>
<div id="responsive-audio-text">
<h6>AuraPlus[+]</h6>
<p>Mixed by:<br>
Composed by:<br>
Tracks:<br>
</p>
</div>
<img src="http://images.complex.com/complex/image/upload/t_article_image/chance-the-rapper-coloring-book-cover_gpzfqr.jpg" alt="DO LATERRR">
</li>
</ul>
Also, here is the updated jsfiddle: https://jsfiddle.net/30go7uvz/6/
NOTE: I have researched this and tried vertical-align: top (as this was a common answer to the same issue and several other questions). However, this did not work. Perhaps I used it wrong, or there is another reason for its not working? Additionally, applying position: absolute to the text fixes the issue, but this is not viable due to its showing up over the header upon scrolling.
Any help would be greatly appreciated.
Adjust your margin properties:
#audio-section #audio-links li img {
width: 46%;
height: 100%;
margin: 5% 0 2% 4%;
display: inline-block;
vertical-align: top;
}
#audio-section #audio-links li #responsive-audio-text {
display: inline-block;
width: 45%;
margin: 100px 0px 0 0;
float: right;
}
As you have it, the margins are forcing a great deal of space next to the inline-block elements, especially for the div. You've got 400px of margin to the left of it.... meaning they aren't fitting on the same visual row. By correcting the margins, they align as expected.
fiddle update
I'm a beginner at CSS and HTML so I'm sure this is a mess. But what I'm trying to do is center 3 images side by side in a horizontal center in CSS. I've tried different solutions have gotten them to align properly but they still stay stuck to the left of the page or will stack on top of each other (and sometimes overlap).
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
And my CSS:
#imagesMain{
display: inline-block;
position:relative;
padding: 0;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
text-align:center;
}
#imagesMain img{
height: 400px;
width: 300px;
vertical-align: center;
}
The images by default are huge. the 2nd CSS block resizes them but I can't get them to do much else. Any ideas?
You can use the almost same CSS, but with one simple correction, change:
vertical-align: middle;
And remove these:
display: inline-block;
position: relative;
There's no center here. It must be middle. Please correct it. And remove display: inline-block from the <div>. Your final code should be like:
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain img {
height: 400px;
width: 300px;
vertical-align: middle;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
Click on Run Code Snippet and press Full Page to check if this is what you are expecting.
Try changing display: inline-block to display: block (as well as removing margin-left: auto; margin-right: auto;. If you're ok with #imagesMain taking up 100% of the width of the screen, with the images centered inside, this will work fine.
try learing flexbox because it has many uses for nicely aligning items and content.
it also keeps your css very small.
if you would like to keep them centered al the time. you should use justify-content: center;
#imagesMain{
display: flex;
justify-content: center;
}
#imagesMain img{
height: 400px;
width: 300px;
margin: 0 10px;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
for alternative uses look at css tricks they give good examples for how to use flexbox.
Probably your problem is the container, because the image are correct align to the center, I have simplify your code and colored the container and images:
#imagesMain{
position:relative;
display: inline-block;
width:100%;
height:250px;
margin-top:20px;
background-color:red;
text-align:center;
}
#imagesMain img{
background-color:blue;
height: 200px;
width: 150px;
margin-left:-4px; /* trick for remove the space beetwen */
}
https://jsfiddle.net/bcpph0pp/1/
UPDATE
Reading other comments I think you want all aligned in the middle, this is a good resource for generate the code for FLEX BOX: http://the-echoplex.net/flexyboxes/
And this is the example: https://jsfiddle.net/bcpph0pp/2/
I know I must be missing something stupid but I can't figure out why my logo will not center on our mobile site. Please check out this site at under 770px screen width: http://www.estiponagroup.com/dev
CSS:
.main-header .logo-and-menu-container .logo-column {
float: none !important;
margin: 0 auto !important;
max-width: 770px !important;
width: 100% !important;
display: block;
min-height: 120px;
}
.header-logo.logo-image img{
display:block;
position:relative;
margin:0 auto;
width:100%;
max-width:304px;
}
.main-header .logo-and-menu-container .logo-column::after{
content:'';
display:block;
clear:both !important;}
HTML
<div class="logo-column">
<style>.logo-image { width: 304px; }</style><a class="header-logo logo-image" href="http://www.estiponagroup.com/dev">
<img width="304" height="108" alt="logo" src="//www.estiponagroup.com/dev/wp-content/uploads/eg-logo-300.png">
Can anyone point me in the direction of getting this logo to center?
Add this to that media query
#media (max-width: 770px){
.logo-image {
max-width: 384px;
margin-left: auto;
margin-right: auto;
}
}
You need to understand how css works.
All your elements inherate some property from their parents.
So in you case the website your are showing the logo-column class is limiting the size of the div, so the logo can't be in the center because he is limited widrth 80px and with a margin-right.
So i tested in my browser and changed to this.
Change the inline [line 86] class .main-header .logo-and-menu-container .logo-column to this
width:100%
max-width:100%;
I also added a margin-left and right to auto and set to display block, doing this (raising the width size and setting the < a > element to the code below allow your logo to be right in the middle.
<a style="margin-right: auto; margin-left: auto; display: block;" href="http://www.estiponagroup.com/dev" class="header-logo logo-image">
Ps.: You should change the "hard code" in the css to the css file.
Check the result : http://snag.gy/pfsk1.jpg
Delete rule:
media="all" .header-logo.logo-image
display: block;
and add:
margin: 0 auto;
display: block;
on the image (for right media size).
Give a margin: 0 auto; on the tag around the logo in the media query
.main-header .logo-and-menu-container .logo-image {
margin: 0 auto;
}
here is a complete and perfect reference for centering every things.
centering elements with css
vertical-align has always given me problems in the past and once again I'm met with a problem that I don't know how to solve.
I have this html:
<ul id="council-slider">
<li class="col-md-12" style="display: block">
<img src="somesource" />
<div class="council-spacer"></div>
<p>text content goes here</p>
</li>
</ul>
CSS:
#council-slider {
margin: 0 auto;
list-style: none;
min-height: 300px;
max-height: 400px;
}
#council-slider li img {
float: left;
height: auto;
width: 25%;
margin: 5px;
}
.council-spacer {
height: 300px;
width: 100px;
float: left;
}
#council-slider li p {
margin-top: 100px;
}
I want to be able to vertically align the image in the middle. The text is multiple lines that wrapped so using line-height will not work in this situation. Also the images can have varying heights.
There are multiple list items; I just used one in the example to simplify and reduce the html.
You should read up on where the vertical-align property has the ability to be applied.
Quoting from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Since your element is not being displayed as either inline or table-cell vertical-align: middle; will not do you any good here.
You can, however, set your <div> styling to display: table-cell; and then vertical-align: middle
Alternatively, this can be achieved with CSS3 as hars pointed out, just make sure your user's browsers support CSS3
.valign-middle {
position: relative;
top: 50%;
Transform: translateY (-50%);
}
The way this works -
Set position relative to the parent/container (i.e. <li> in your case)
Move the image that you want to vertically align, down 50% of the container height
Move the image up 50% of the height of the image
Add a class to your img as below.
.verticallyCenter {
position: relative;
top:50%;
Transform:translateY (-50%);}
Refer This
Without seeing your actual css code it is hard to say, but you should use vertical-align: middle for all objects that you want to align and you may need to change the display of your paragraph to display: table-cell.
Will be easier using flexbox: display: flex; and align-items: center;
Demo
#council-slider {
list-style: none;
}
#council-slider li{
display: flex;
margin: 10px 0;
align-items: center;
}
.council-spacer {
width: 20px;
}