Media query not working

ianpanorton1

Hi - I've set two items with margin-left:-50% to tidy up two test input boxes at the foot of the page which works fine:

.rsform-block-months-at-current-address .rsform-input-box
{width:25% !important;
margin-left:-50% !important;
}

.rsform-block-months-at-current-address .formDescription
{width:25% !important;
margin-left:-50% !important;
}

However, on mobiles it throws the input box right over to the left. I've used the media query below to rectify this, but it's not working for me. Any idea where I'm going wrong?

Thanks

Ian

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
.rsform-block-months-at-current-address .rsform-input-box
{margin-left:0 !important;}
}

Joshua-M

Hi,

It seems that your last part of css is overriden by the code from responsive.css file:

@media screen and (max-width: 650px)
.formResponsive input[type="text"], .formResponsive input[type="password"], .formResponsive textarea, .formResponsive select {
    width: 100% !important;
}

Try to make your css rule stronger by adding another css class at the beginning:

.formResponsive .rsform-block-years-at-current-address .rsform-input-box {
    width: 25% !important;
}

Hope it helps..

Cheers
Joshua

paulus1031

I'd avoid using negative margins if at all possible

I'd consider targetting something like this rather than negative margins

.formResponsive .formHorizontal .rsform-block-months-at-current-address .formControlLabel,
.formResponsive .formHorizontal .rsform-block-years-at-current-address .formControlLabel
{width: 0%;}

.formResponsive .formHorizontal .rsform-block-months-at-current-address .formControls,
.formResponsive .formHorizontal .rsform-block-years-at-current-address .formControls
{margin-left: 0%;}

.formResponsive .formRow:nth-child(3n) .formSpan6 {width:25%;}

body .rsform-block-months-at-current-address .rsform-input-box{width:25%;}

paulus1031

Media query wise I'd increase the specificity but using the important is still valid

@media screen and (max-width: 650px) {
body .formResponsive input[type="text"], body .formResponsive input[type="password"], body .formResponsive textarea, .formResponsive select {width: 100% }
}