Conversation
supportThe widget is hiding behind my theme. Is there a fix? Where issue persists: http://chicagoweatherauthority.com/current-alerts/ https://wordpress.org/plugins/national-weather-service-alerts/
It looks like the theme content div has overflow set to hidden. There are a few options: Modify the theme style.css file (or create a child theme) and remove (or comment-out) the overflow property: .post-content { padding-top: 15px; margin-top: 15px; padding-bottom: 15px; margin-bottom: 15px; /* overflow: hidden; */ clear: both; } Or, modify the theme style.css file to modify the NWS Alerts styles: .nws-alerts { float:none; } .nws-alerts-heading { float:none; } .nws-alerts-details { position:relative; display:block; max-height:none; height:auto; opacity:1; } .nws-alerts-entries { max-height:none; height:auto; } Let me know if neither of these will work.
The bottom code works, but it is a little glitchy when hovering my mouse over it.
I forgot to include the mouse-over styles, so you’ll want to add this to the bottom of what you’ve already added. This will prevent the height from being restricted on mouse-over, so the glitches will go away. .nws-alerts:hover { z-index:3; } .nws-alerts:hover .nws-alerts-entries { max-height:none; } Depending on your needs you may also want to make the map larger and you can do that by adjusting the height with the below selector: .nws-alerts-map { height: 400px; }
It looks like the theme content div has overflow set to hidden. There are a few options: Modify the theme style.css file (or create a child theme) and remove (or comment-out) the overflow property: .post-content { padding-top: 15px; margin-top: 15px; padding-bottom: 15px; margin-bottom: 15px; /* overflow: hidden; */ clear: both; } Or, modify the theme style.css file to modify the NWS Alerts styles: .nws-alerts { float:none; } .nws-alerts-heading { float:none; } .nws-alerts-details { position:relative; display:block; max-height:none; height:auto; opacity:1; } .nws-alerts-entries { max-height:none; height:auto; } Let me know if neither of these will work.
The bottom code works, but it is a little glitchy when hovering my mouse over it.
I forgot to include the mouse-over styles, so you’ll want to add this to the bottom of what you’ve already added. This will prevent the height from being restricted on mouse-over, so the glitches will go away. .nws-alerts:hover { z-index:3; } .nws-alerts:hover .nws-alerts-entries { max-height:none; } Depending on your needs you may also want to make the map larger and you can do that by adjusting the height with the below selector: .nws-alerts-map { height: 400px; }