Dimensions of site elements change on click

[digifocus]

Hi,

I have build a repsonsive site using the bootstrap framework. I noticed that the complete site and elements respond to click events in a way that is not desired. I have tested this in Chrome and IE and both respond the same. So I think there is something in the CSS causing this.

When you click on a block or a paragraph of text the site is moving.

The URL of the site is: http://www.maaikesatelier.nl/overmaaike
I hope one of you guys can help me out.

Thx,
Marcel

[Shikkediel]

It has to do with this border that is added :

.img-thumbnail:link, :visited, :active {
border: 1px solid #DDD;
}

On line 277 of home.css.

[digifocus]

Thanks for your feedback but this isn’t the solution. When I click on every element it moves.

[Paulie_D]

I think Shikkediel was on the right track.

This:

.ximg-thumbnail:link, :visited, :active {
    border: 1px solid #ddd;
}

looks to be the culprit.

I suspect it’s incorrect and should be:

.ximg-thumbnail:link, 
.ximg-thumbnail:visited, 
.ximg-thumbnail:active {
    border: 1px solid #ddd;
}

At the moment any element is getting this border when it is clicked.

[Shikkediel]

Ah, that detail I missed. The added borders seem to be messing with collapsing margins or something (since all elements have box-sizing applied)…

[digifocus]

Hi guys,

Thanks for your input. I just changed the css and it worked!

Thanks.

Marcel

[Author]

Posts