Solution 1 :

Inline styles always take precedence over selector based styles. You can override this with the !important modifier, but a much better solution is to modify the HTML and remove the inline styles in the first place.

Inline styles mean that the styles are placed directly within the HTML tag, i.e. style=. This has the highest “specificity” when the browser determines which CSS rules to apply when multiple rules specify conflicting things.

If you are not able to modify the DOM (HTML) then adding the !important flag overrides the default specificity order:

display: block !important;

However this approach tends to cause problems later on, as CSS specificity is there to help you handle multiple rules applying differently to multiple elements, and you’re essentially bypassing that ability.

(Also, your selector does not appear to correctly target the elements with floats. The two div elements do not have an easy and stable way to target them, as they have no class or ID and are in the middle of other elements. You’d want to give them a class to make targetting them with your rules easier. For now the best you could do would be something like #contactorange .w3-container > div, but this would very easily break or accidentally apply to other elements if you modified your HTML.)

I’d suggest reading up on CSS specificity which is not that complicated but very useful to understand: Reference on specificity

Problem :

I want to get a responsive layout, in my code bellow

the code:

<div id ="contactorange">
<div class="w3-container" style="width:100%;height:300px; background-color:rgb(255, 210, 121);">
  <p><h1 class="w3-medium center" style=" margin: 20px 0 5px 30px;"><img src="img/LOGOFOOTER.png" class="w3-center" style="height:30px;width:30px; position: relative; left: 4%;"><b style="position: relative; left: 5%; font-family: 'Montserrat'; color: rgb(253, 103, 48);">Conectando à SMU</b></img></h1></p>
  <div style="float: left; width: 20%; text-align:left; margin: 0% 2% 0% 2%; position: relative; left: 5%; top: 15%;">
    <li ><b style="font-family: 'Montserrat';">Contato</b></li>
    <li style="font-family: 'Montserrat';">Telefones:</li>
    <li style="font-family: 'Montserrat';">E-mails:</li>
    <li> <a href="#" style="font-family: 'Montserrat';">Horários</li>
    <li> <a href="#" style="font-family: 'Montserrat';">Departamentos</li>
    <li> <a href="#" style="font-family: 'Montserrat';">Dúvidas Frequentes</li>
    <li> <a href="#" style="font-family: 'Montserrat';">Biblioteca</li>
    <div style="float: left; width: 20%; text-align:left; margin: 0% 2% 0% 2%; position: relative; top: 15%;">
    <li><b style="font-family: 'Montserrat';">Links Úteis</b></li>
    <li><a href="" class="w3-hover-opacity"; style="font-family: 'Montserrat'">Prefeitura de Niterói</a></li>
    <li><a href="" class="w3-hover-opacity"; style="font-family: 'Montserrat'">Niterói de Bicicleta</a></li>
    </ul> </div></div></div>

So I tried to apply this:

<style>#contactorange.w3-container ul li{
        width: 30%;
        float: none;
        display: block;
        height: 100%;
      } </style>

But it’s not working, the lists are side by side, and i want them in the default, in blocks.


Comment posted by Marcelo

Yes, it works only with taking out the float from the inline styles, and putting in the script above my code. Thank you!


Leave a Reply

Your email address will not be published. Required fields are marked *