CSS Help , images not scaling down properly

[PaulOB]

Can you supply a screenshot of the problem as it looks more or less ok to me (apart from the mismatch in the header that I pointed out earlier).

Also note that if you are adding padding to the input and it is width:100% then it will be too big because the padding will be on top of the 100% width.

You could set the box-sizing:border-box model for that input instead.

.sqs-search-ui-button-wrapper .search-input {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

[ac1986]

Thanks , that worked!

[ac1986]

hi,
Im still having problems with the orange banner ‘where we are’ image on the map page. It appears to large on some screens and i cant seem to change the height?

[PaulOB]

The image is scaled to the div called .intrinsic so if you want to limit the max-width then apply a max-width to .intrinsic.

e.g.

.intrinsic {
    max-width: 980px !important;
}

The !important is needed because you have inline styles being applied.

I’m not sure if that was the issue you were referring to though.

[ac1986]

http://www.thevandiaries.com/map/ the orange box at the top?

Im on about making the height slightly smaller on larger screens

[PaulOB]

Hi,

The yellow box is basically an image so you can’t change the height unless you want to squash the image.

There is a lot of yellow space around the image so you could try something like the following which will hide some of the yellow.

@media screen and (min-width:960px) {
.image-block-wrapper {
padding-bottom:15%!important;
}
.image-block-wrapper img {
top:-33%;
}
}

It’s not perfect but it may be ok.

[ac1986]

the problem with this is I think changing .image-block-wrapper { will change elements elsewhere on the site?

[PaulOB]

@ac1986

the problem with this is I think changing .image-block-wrappe

Then just add a custom class to the element and sidestep the issue

[ac1986]

how would I do this ?

[PaulOB]

I think we may be talking at cross purposes or I have missed something important but as you have built quite a complicated site I’m sure you can add a class to an element quite easily.

e.g. Add ‘my-custom-image-wrapper’ class here:

<div style="padding-bottom:25.537405014038086%;" class="image-block-wrapper my-custom-image-wrapper " data-description="">																					<noscript>																			<img src="   etc....,

Then use that in the css I gave above:

@media screen and (min-width:960px) {
.my-custom-image-wrapper {
padding-bottom:15%!important;
}
.my-custom-image-wrapper img {
top:-33%;
}
}

Or am I missing something obvious here? (probably )

[ac1986]

its a square-space site so not sure you can add a custom class?
I don’t really understand where the 25% padding is coming from and why its there?? or indeed how to get rid of it.

[ac1986]

sorry that was really stupid of me! fixed it!

[PaulOB]

@ac1986

I don’t really understand where the 25% padding is coming from and why its there??

The padding is being used to create an aspect ratio so that things like videos can be placed on them and allowed to scale (it also works for images but you don’t often need it for that ).

Vertical percentage padding is based on the width of the element so you can create aspect ratios that maintain as the page gets smaller and then onto this element you absolutely place your video or image.

Usually with images you can just set width to 100% and height to auto to achieve the same effect anyway.