CODEWITHSUNDEEP
css
Michelle
Michelle

Reputation: 549

css resizing input box

I'm trying to reduce the size of an input box on a mobile device and the css won't work.

I used google dev tools to get the name of the element (input#calc_shipping_postcode.input-text) but when I try and specify the width in CSS nothing happens.. the page is -https://ffe-dev.flowersforeveryone.co.za/flower-delivery/

the CSS i'm trying to use is -

    input#calc_shipping_postcode.input-text {
    width: 270px;
}

Can someone please tell me what i'm doing wrong? Thanks

Upvotes: 1

Views: 69

Answers (2)

Sumit Patel
Sumit Patel

Reputation: 4638

Instated of adding width in px use %. will work in all devices.

try this.

input#calc_shipping_postcode {
    width: 100% !important;
    max-width: 350px;
}

Upvotes: 2

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

The problem with your site is that width are set to 350px by inline styling.

This is caused from some wordpress plugin (maybe this set from WPBakey).

One solution is to find out what is causing this styling in wordpress then edit it.

Other fast workaround solution is to override ths by adding !important to your css property like: 

input#calc_shipping_postcode.input-text {
  width: 270px !important;
}

Upvotes: 3

Related Questions