I would like to align my three images that I have created "hover" states for

designedbyccc · Member · Oct 28, 2014 at 8:46 pm
Copy link

Add topic to favorites
On this page

https://twoviewsnz.wordpress.com/portfolio/business-advisory/

Pretty much at the bottom of the page, but just above “more projects” I have created three images (thumbnails) that link to various portfolios and also have a hover state.

I would like these three images to line up one next to another and not underneath each other. They were the same size and lined up before I added the hover state css, any help would be greatly appreciated, thanks very much :)

Chanel

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 30, 2014 at 3:53 am
Copy link
Hi there, first off, change your code in your page to this.
<div style="max-height: 420px; display: flex; display: -webkit-flex;"><a href="https://twoviewsnz.wordpress.com/project-type/we-were-there/" id="roll_one">Description text that will not be displayed</a> <a href="https://twoviewsnz.wordpress.com/project-type/we-love/" id="roll_two">Description text that will not be displayed</a> <a href="https://twoviewsnz.wordpress.com/project-type/equestrian-world/" id="roll_three">Description text that will not be displayed</a></div>
Next, change your CSS to look like this.
```
#roll_one {
    background: url("//twoviewsnz.files.wordpress.com/2014/10/twoviews_buttons-11.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 420px;
    text-indent: -999em;
    width: 420px;
    background-size: contain;
}
#roll_two {
    background: url("//twoviewsnz.files.wordpress.com/2014/10/twoviews_buttons-5.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 420px;
    text-indent: -999em;
    width: 420px;
    background-size: contain;
}
#roll_three {
    background: url("//twoviewsnz.files.wordpress.com/2014/10/twoviews_buttons-3.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 420px;
    text-indent: -999em;
    width: 420px;
    background-size: contain;
}
```
Your site currently has the three images in a paragraph. I’ve changed that to a div instead, set a maximum height equal to your image heights and then set it to display: flex; which makes the div display as a block level flex container. To your CSS, I added the background-size: contain declaration so the images would always size to remain inside the bounds of the div container.

See what you think.
designedbyccc · Member · Oct 30, 2014 at 4:05 am
Copy link
Great thats what I was after thanks very much :)

I just have lost the “hover” state now…

https://twoviewsnz.wordpress.com/portfolio/business-advisory/
thesacredpath · Member · Oct 30, 2014 at 4:11 am
Copy link
Hi there, it looks like you deleted the hover CSS for roll_one, two and three. I’m not seeing it in your CSS anymore. You can recover it from your CSS revisions (link at top right on CSS edit window).
designedbyccc · Member · Oct 30, 2014 at 7:24 am
Copy link
Whoops, that sorted it! Thanks very much for all your help :)
thesacredpath · Member · Oct 30, 2014 at 1:52 pm
Copy link
You are welcome. All looks well. Let us know if you have additional questions.
designedbyccc · Member · Nov 10, 2014 at 10:40 pm
Copy link
I have another question now regarding the above. It looks great on various computer sized screens but these three images are huge on my iphone when viewing the website… anything I can do to make them smaller when viewed on a phone?

Thanks very much :)
designsimply · Member · Nov 12, 2014 at 2:17 am
Copy link
You can use media queries to make adjustments to smaller screen sizes.

Review this to learn about how they work:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/

Here is an example to get you started:
```
@media screen and (max-width: 400px) {
	#roll_one,
	#roll_two,
	#roll_three {
		height: 116px;
	}
}
```
designedbyccc · Member · Nov 19, 2014 at 1:11 am
Copy link
great thanks very much designsimply :)

That definitely works expect on my iphone each buttons repeats horizontally….
designedbyccc · Member · Nov 19, 2014 at 6:39 pm
Copy link
Also I have now made these three images smaller (320px) but would like them to sit in the center… any help would be greatly appreciated :)
designsimply · Member · Nov 19, 2014 at 7:40 pm
Copy link
Ooo, I see you’re using “display:flex;”, cool!

With flexbox, you can use “justify-content:center;” to center flex items.

See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
designedbyccc · Member · Nov 19, 2014 at 10:10 pm
Copy link
Thanks designsimply!

I have tried adding that in but every time I update/save the page it disappears and makes no effect on the website…
designsimply · Member · Nov 20, 2014 at 7:40 pm
Copy link
Sorry I wasn’t more clear. The “justify-content:center;” needs to be applied to the div container for the image block you want to change.

Here is the HTML I see at the bottom of the https://twoviewsnz.wordpress.com/portfolio/business-advisory/ page just below the sentence that says, “Please click on any of the below buttons to learn more about twoviews.”

<div style="max-height: 320px; display: flex;"><a id="roll_one" href="https://twoviewsnz.wordpress.com/project-type/we-were-there/"> Description text that will not be displayed</a> <a id="roll_two" href="https://twoviewsnz.wordpress.com/project-type/we-love/">Description text that will not be displayed</a> <a id="roll_three" href="https://twoviewsnz.wordpress.com/project-type/equestrian-world/">Description text that will not be displayed</a></div>

In the first part, display:flex; is used, and you should put justify-content:center; right after that.
designedbyccc · Member · Nov 20, 2014 at 9:38 pm
Copy link
hi designsimply, that is where I put it before but when I update/publish “justify-content:center;” disappears in the dv container and makes no difference on the website….
designsimply · Member · Nov 20, 2014 at 10:03 pm
Copy link
Oh, I see. I’m not sure what the problem could be! Can you make a change to one of the words in the sentence above there as a test to see if any changes will save for you? Also, can you tell me the URL of the edit page you’re working on?
designedbyccc · Member · Nov 20, 2014 at 10:44 pm
Copy link
Hey :)

Im working on this page currently https://twoviewsnz.wordpress.com/portfolio/business-advisory/

I added the word “this” in the sentence above and it saves fine.

I think something weird must be happening as when you hover over these images now they almost show the non-hover state in between the hover state, kind of “flashing” rather than “hovering”…
designsimply · Member · Nov 20, 2014 at 11:40 pm
Copy link
I added the word “this” in the sentence above and it saves fine.

Thanks for testing that. I tried copying your HTML into my test blog, and adding “justify-content:center;” didn’t work for me either.

Well!

Inline CSS editing isn’t encouraged here in general, and “justify-content” is actually a fairly new CSS3 rule so it’s possible support was just never added for it in the HTML editor and that’s probably not something that will be updated because the CSS editor is preferable. You should be able to add the “justify-content” property to the CSS editor though. To make the switch, first edit the HTML for your image block. Remove this: style="max-height: 320px; display: flex;"

Replace it with this:

<div class="my-image-block">

Or whatever class name you want to use. Then add this to your Appearance > Customize > CSS editor:
```
.my-image-block {
	max-height:320px;
	display:flex;
	justify-content: center;
}
```
If you changed the class name in the HTML, make sure to change it in the CSS too.

I think something weird must be happening as when you hover over these images now they almost show the non-hover state in between the hover state, kind of “flashing” rather than “hovering”…

That’s really strange. I’m not sure what’s causing it, but if I had to make an educated guess I would say it probably has to do with the “background-size: contain;” rule because it might have to redraw every time the hover action happens. Try getting rid of it. Instead of using “background-size”, you can resize the images on the fly with a query string so the images fit into their containers nicely. To do that, add “?w=320” to the end of “.jpg” every time a jpeg file is referenced in the CSS related to those images.
designedbyccc · Member · Nov 21, 2014 at 1:54 am
Copy link
Hi designsimply thanks very much for all your help :)

the hover state works much better now thanks! The three images will still not centre and I think I followed your instructions correctly…
designsimply · Member · Nov 21, 2014 at 7:23 am
Copy link
Darn, you’re right. I thought I had double checked that saving a rule for justify-content would work, but it actually doesn’t. I tried it again and if I refresh then the change goes away. This is a problem with the editor itself. I will put in a request to see if we can get it updated but I’m not sure how long it will take since it seems not very many people are using that property—this is the first time I have seen it come up.

Sorry I didn’t catch that before! I really thought I’d double checked it.

In the mean time, you actually don’t really need flexbox anyway, and even thought I think flexbox is way cool :) you can work around it by changing the display to block and making a few other adjustments. Can you give the following a try?

First, edit the html and remove ALL the space from between the “a” elements in the block so they are on one line with no space between “>” and “<” characters.

Then remove this:
```
.my-image-block {
	max-height: 320px;
	display: flex;
}
```
And add this:
```
.my-image-block {
	max-height: 320px;
	max-width: 960px;
	display: block;
	margin: 0 auto;
}
.my-image-block a {
	float: left;
}
```
Let me know if it works. :)
designedbyccc · Member · Nov 25, 2014 at 8:57 pm
Copy link
Great thanks so much that works perfectly now :)

Think we are nearly there now…. we added the below css a few days ago for smartphones but now each button repeats horizontally on an iphone….

@media screen and (max-width: 400px) {
#roll_one,
#roll_two,
#roll_three {
height: 116px;
}
}

Any thoughts…?

Thanks very much :)

No items found.