Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Margin e padding bloqueados

Olá. Preciso muito de uma ajuda que é a seguinte: Possuo uma bolsa de iniciação científica da minha universidade. Estou construindo um site para um congresso da pesquisa. O que está acontecendo é que na última section em TOPICS OFINTEREST, eu não estou conseguindo mexer nos espaçamentos da margem ou padding quando a tela se adapta para celular. Prece que fica bloqueado. Na inspeção ode elementos com o F12 vejo que justamente os atributos margin e padding estão com um espaço que não consigo retirar. Ao lado tem a palavra "!important;" o que é isso?Em resumo estou querendo ter o poder de mexer nos espaçamentos a qualquer momento sabe? Desde já muito obrigado pela ajuda!

O site é exatamente esse link abaixo: http://iwssip2020.ic.uff.br/model/

Abaixo vou colocar exatamente a section que me refiro:

<section class="container-fluid bg-light d-flex">
    <div id="topcs" class="p-5 m-5">
        <h2 class="text-uppercase">topics of</h2>
        <h2 class="text-uppercase">interest</h2>

        <div class="row my-5">
            <div class="col-sm">
                <ul>
                    <li style="font-size: 1.4em" class="ali item text-uppercase font-weight-bold">Signal Processing</li>
                    <li style="font-size: 1.4em" class="item text-uppercase font-weight-bold">Image and Video Processing</li>
                    <li style="font-size: 1.4em" class="item text-uppercase font-weight-bold">Speech and Audio Processing</li>
                    <li style="font-size: 1.4em" class="item text-uppercase font-weight-bold">Machine Learning</li>
                    <li style="font-size: 1.4em" class="item text-uppercase font-weight-bold">Human Machine Interface</li>
                </ul>
            </div>
            <div class="col-sm">
                <ul>
                    <li style="font-size: 1.4em" class="item text-uppercase font-weight-bold">Multimedia</li>
                    <li style="font-size: 1.4em" class="item text-uppercase font-weight-bold">Network</li>
                    <li style="font-size: 1.4em" class="item text-uppercase font-weight-bold">Security</li>
                    <li style="font-size: 1.4em" class="item text-uppercase font-weight-bold">Wireless Communications</li>
                    <li style="font-size: 1.4em" class="item text-uppercase font-weight-bold">Modern ICT in E-learning</li>
                </ul>
            </div>
        </div>
    </div>
</section>
insira seu código aqui
4 respostas

Boa noite, Dorimar! Como vai?

Então, o problema provavelmente é esse tal de !important, pois a função dele é garantir que os valores onde ele é utilizado não possam ser sobrescritos nem com reza braba! Em outras palavras, se vc fizer algo do tipo padding: 10px !important, isso significa que o seu padding sempre será 10px, não importando o que vc tente fazer para sobrescrever esse valor!

Sendo assim, a solução que vc busca provavelmente irá passar pela remoção desse !important! Mas ao removê-lo isso deverá acarretar em ter que mudar outras partes do CSS, pois se alguém usou o !important foi pq provavelmente esses valores são sobrescritos em outras partes do CSS. E a pessoa usou desse artifício justamente para evitar essa sobrescrita!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos!

Oi Gabriel. Obrigado por responder e entendi o que quer dizer. Mas veja bem, eu mesmo que estou fazendo o site desde o inicio, Em nenhum momento eu coloquei esse "!important", nem sabia para o que ele servia. Sabe me dizer como eu retiro ele? O que eu fiz foi em bootstrap usar o p-05 e o m-5 sabe? E quando a tela diminuir para ficar do tamanho de um celular quero poder mexer no padding e margin, mas não esotu conseguindo. Em css estou usando o media-query sabe?

solução!

Claro, entendi sim! Dei uma olhada na documentação do Bootstrap e lá é mostrado que eles mesmo incluem o !important! Mas também é mostrado que vc pode utilizar os próprios breakpoints do Bootstrap para diferenciar como seus elementos serão mostrados em diferentes tipos de telas! Dê uma olhada nesse link da documentão pois lá é explicado sobre isso!

Qualquer coisa é só falar!

Caramba entendi! Resolveu! Eu entendi que essas classes já estão com o !important atribuidos no arquivo bootstrap.css . Dessa forma eu tenho que deixar de usar eles a usar as declarações em css mesmo caso eu queira mudar o espaçamento depois em outra tela. Já fiz isso e funcionou!Obrigadão Gabriel!!!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software