Question 1844 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Overriding radio styling in CSS, without direct access due to shortcode use WordPress

I’m using WordPress and Propertyhive plugin to develop a property development website.

Because I’m using a custom theme, I need to use shortcodes provided by the propertyhive plugin to generate the correct parts on different pages.

The search box here (https://managemyrentaluk.com/our-properties/) doesn’t style very well – I’ve managed to over-write some of the CSS to style the drop-downs better, but the radio input labels don’t stack.

Any idea what I can do? Other than using Elementor to overwrite the CSS, I can’t edit the source CSS as that’s controlled by the plugin.

Thanks in advance.

I’ve tried overwriting CSS but I suspect there’s some conflict going on that I can’t get to the bottom of – any advice welcome.

Tags:

2

Answers


  1. 0

    You can use

    
/*---- To make your form inline-flex and make items centered vertically -----*/
form[name='ph_property_search']{
    display: inline-flex;
    align-items: center;
}

/*----- To position your radio elements over and under without wrapping -----*/
.control.control-department {
    display: grid;
}
.control.control-department label {
    white-space: nowrap;
}

    Hope this helps.

    Login or Signup to reply.
  2. 0

    The simplest solution would be to display block the labels.

    .property-search-form .control.control-department label {
  display: block;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search