-2

Issue: image.png

The drop-down menu is showing "Choose an option" like a box that comes out of the text area. I did my little research and it is a CSS issue and followed the instructions.

I right-click on the "Choose an option" and click on "inspect" as shown below:

Issue 1

The highlighted code is where the error is and if I change the "width" in the code to "150px" or "Auto" then the option appears accurately as below

Issue 2

This needs to be added to the Custom CSS code in my WordPress Custom CSS tab which I did as below

Issue3

But it does not change after I hit Publish. That is my glitch. I am not sure what I am doing wrong. Maybe I am not choosing the CSS Class correctly.

SMAKSS
  • 9,606
  • 3
  • 19
  • 34
arvindaceshigh
  • 1

1 Answers1

-1

You should have inspected the element to be sure, but my guess is that, for some reason, wordpress is initialing the inline style of the element to 36px. That overwrites the class styling (you can read more about css priorities here).

As an easy fix you could just use important! rule. You should be carefully to use it only when is really necessary (you can read more about here).

I really recomand to only use important when you really need it, since it can easily backfire otherwise.

Berci
  • 2,876
  • 1
  • 18
  • 28
  • https://rabbagash.com/product/clearance-scoyco-cow-leather-motorcycle-boots-men-motocross-boots-off-road-racing-boots-professional-motorcycle-shoes/ – arvindaceshigh May 05 '20 at 07:57
  • If you create a class let's say `full-with` , you set it like this in the css: `.full-with { witdth: 100%!important;}` than give your elements this class, it should work. – Berci May 05 '20 at 08:02
  • Hi Berci, https://rabbagash.com/product/clearance-scoyco-cow-leather-motorcycle-boots-men-motocross-boots-off-road-racing-boots-professional-motorcycle-shoes/ That is the link to the page, is it possible for you to inspect it please? That way, you can see the whole code. I am very new to coding and watching tutorials to get this sorted. Thank you – arvindaceshigh May 05 '20 at 08:11
  • I can follow your instructions, I am unaware on hot to go about even creating a class... sorry – arvindaceshigh May 05 '20 at 08:11
  • That is really hard to answer since I can only see the generated code. I don't know if you use a theme or what acces you have to modify it. You should be able to create a class just by opening the `Customizing additional css ` tab and copying `.full-with { witdth: 100%!important;}`. Than add it to you html elements. – Berci May 05 '20 at 08:24
  • Thank you Barci, I will try it out now. – arvindaceshigh May 05 '20 at 09:33