css resizing input box

Question

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

there is an inline width applied for the element. Remove it and then add your css. or try adding !important to the rule. — Pons Purushothaman
– Pons Purushothaman, Commented Aug 13, 2019 at 9:30

Kareem Dabbeet · Accepted Answer · 2019-08-13 09:30:05Z

3

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;
}

answered Aug 13, 2019 at 9:30

Kareem Dabbeet

3,9943 gold badges19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sumit Patel · Accepted Answer · 2019-08-13 09:32:00Z

2

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

try this.

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

answered Aug 13, 2019 at 9:32

Sumit Patel

4,6481 gold badge13 silver badges28 bronze badges

4 Comments

Kareem Dabbeet Over a year ago

Nope,This won't change the width.

Sumit Patel Over a year ago

you can try this will work as fluid try doing that and then let me know.

Kareem Dabbeet Over a year ago

I've just tried it, But maybe you've misunderstood the question. The question is about reducing the width. but with your code the width will remain 350px, Maybe you mean 270px not 350

Sumit Patel Over a year ago

i did mention if you use px will solve the issue but leave the space in landscape but if it in % will look perfect as bootstrap will max -width 350.

Collectives™ on Stack Overflow

css resizing input box

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related