Absolute image not responding with RWD layout

HTML & CSS
1

Hi all

Been working on a site for a client and tried everything to get the green play button to scale with the parent graphic its positioned too. Don’t really want to use javascript and was hoping for a solution if anybody can help. If you load up the URL and scale your browser to tablet and mobile size you’ll see the green play buttons don’t respond.

http://www.playday.no/

Any suggestions?
You might need to scroll down a bit to see.

thanks

2

The first thing I would suggest is to give the arrow a more reliable positioning context. You would think, by looking at it, that the arrow would be placed inside a box the size of the image behind it. If that were the case, it would be easy to position it in relation to that box and allow that positioning to adjust with the screen. As it is, though, the image is positioned relative to a fairly large, vaguely positioned box, which makes it a lot harder to work with.

3

Exactly Ralph.
I did think about this technique but don’t have a fixed size I can use. The same play button is also used on a number of different sized containers so one size will not fit all. I don’t really have that much control over the markup but need away to force some CSS on to the element(s) and make this work. Its like the play button is taken out of the work flow completely and has no relation to the containers below it.

I’ll see if i can find a solution and if you have any ideas let us know, thanks.

Barry

4

Well, it could, actually, as long as the container actually had the dimensions of the area the button needs to center over. I was going to set the image to

top: 50%;
left: 50%;
margin-left: -65px;
margin-top: -65px;

That will basically center it over any container, as long as the container is the right size.

5

Cheers Ralph, seems like a good approach currently testing this now.
As it stands, the play buttons are already centred. Even with the solution above I still have the problem that the image does not scale (change size) when everything else does. Thats my main issue to get the play buttons to scale with the graphic they’re associated with when the window changes size, different device an so on.

Are you saying by using the above the image should now scale?

Thanks, Barry

update (as the css stands):

.video-icon {
    left: 50%;
    margin: 65px 0 0 -65px;
    opacity: 0.8;
    position: absolute;
    top: 50%;
}

Centered very well Ralph but, still image size problem?
Note: Working locally so you won’t see any live updates as yet.

The smaller containers have a unique class I can work with:

width-1-of-3 .video-icon  {
    left: 50%;
    margin: 44px 0 0 -44px;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    width:90px; /* note the image width change */
}
6

You will need to give the image a percentage width so that it has something to be scaled with.

e.g.


.view-frontpage .width-1-of-2 .video-icon {
   width: 30%;
}

It will need tweaking when the media queries click in.

However, as Ralph pointed out your best approach would be to wrap the big image in a div with position:relative set and use that div as a point of reference for the play button. Then place an inner absolute element that can be set to the width and height of the relative div and then do something like.


div.imgholder{position:relative;zoom:1.0;display:inline-block}/* stacking context based on height and width of large image*/

.imgholder div{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:2;
text-align:center;
margin:0;
}

img.video-icon{
margin:auto!important;
width:20%;
height:20%;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}

However if you can’t manipulate the html that much then you are probably stick with the first approximate approach.

7

Cool Paul thanks.
I’ll give this a try and see if I can get things to work.
I can modify markup but lots of messing around due to the CMS I’m working with.

Thanks again and will let you know how things go, cheers.

Barry

8

Thank you :slight_smile:
Instant results once I added the %. As you say, change the media queries and should be good to go.

You will need to give the image a percentage width so that it has something to be scaled with.

e.g.

Code:
.view-frontpage .width-1-of-2 .video-icon {
width: 30%;
}
It will need tweaking when the media queries click in.

Barry :cool: