-1

I wanted to talk about the problem I'm having with @media, I started styling it on mobile first, but when I change something like Font-size on desktop, it also changes on mobile, can someone help me?

@media screen and (max-width: 600px)

.content
    height: 50%
    width: 99%

h3
    padding: 0rem 2rem 1.5rem
    font-size: 18px
    margin: 12px
    font-weight: bold
    text-align: center

.circle 
    height: 53px
    width: 53px
    margin: -13px 0px 0px 10px
    background-color: #fff
    border: 2px solid #5E7278
    line-height: 65px
    font-family: "Roboto"
    color: rgb(97, 120, 123)
    font-size: 25px
    border-radius: 50%
    text-align: center
    margin-left: 60px
    cursor: pointer
    -moz-background-clip: padding-box
    -webkit-background-clip: padding-box
    background-clip: padding-box

span
    font-size: 16px
    display: flex
    justify-content: center
    align-items: center
    color: rgb(97, 120, 123)
    margin-left: 53px
    
.stepWrapper 
    display: flex
    margin-bottom: 2px
    
.stepBlock .circleWrapper 
    padding: 0px 0px
    position: relative

.selected .circle 
    color: #FFF
    background-color: rgb(97, 120, 123)
   
.stepBlock:not(:last-child) >
     .circleWrapper::after 
        content: ''
        width: 100%
        height: 2px
        position: absolute
        top: 0px
        bottom: 0px
        background-color: rgb(97, 120, 123)
        margin: auto
        z-index: -1

.stepBlock:not(:last-child) > 
    .circleWrapper::after 
        height: 3px
        margin-left: 67px
        margin-top: 13px
        

.stepBlock:not(:last-child)
    .selected > .circleWrapper::after, .stepBlock:not(:last-child)
        .selected ~ .stepBlock:not(:last-child) > 
            .circleWrapper::after 
                height: 2px
                opacity: 0.6
                border: 1px solid transparent

.primaryButton 
    padding: 10px 25px
    background-color: rgb(97, 120, 123)
    border-color: rgb(97, 120, 123)
    border: none
    margin: 10px
    color: white
    border-radius: 4px
    cursor: pointer


.primaryButton:disabled 
    opacity: 0.5  

@media screen and (max-width: 600px)

h6
    color: black
    padding: 0.5rem 2rem 2rem
    text-align: center
    line-height: normal
    margin-top: 14px
    margin-bottom: 0px

.inputs-geral 
    margin-left: 10px
    margin-right: 10px
    margin-top: -11px
    border-radius: 10px
    padding: 0px 30px
    display: flex
    flex-direction: column
    -webkit-box-align: center
    align-items: center

.input-group
    display: flex
    align-items: baseline
    flex-wrap: wrap
    width: 100%

.holder
    display: flex
    margin-left: -2px
    align-items: center
    padding: 0.335rem 0.75rem
    margin-bottom: 0
    font-size: 11px
    line-height: 1.1
    color: #495057
    text-align: center
    white-space: nowrap
    font-weight: 600
    background-color: #e9ecef
    border: 1px solid #ced4da
    border-radius: 0.25rem

.form-control 
    border: transparent
    border-bottom: 1px solid #e6e6e6
    height: 30px
    width: 55%

.form-control :hover
    border: 1px solid rgb(97, 120, 123)

.jss8
    margin-left: -6px
    position: relative
    z-index: 1
    
.politic
    color: black
    font-size: 9px
    font-weight: 600
    margin-left: 24px
    text-align: justify
    text-justify: inter-word
    line-height: 2.1
    margin-top: -25px

.text-center 
    text-align: center!important
    display: inline-block

.buttons
    margin-right: 35px

.bt1
    width: 100%
    color: white
    background-color: rgb(97, 120, 123)
    border-radius: 3px
    padding: 9px 33px
    line-height: 1.2
    border: none
    font-size: 14px
    margin-top: 20px
    text-align: center
           
.bt2
    width: 100%
    color: white
    background-color: rgb(97, 120, 123)
    border-radius: 3px
    padding: 7px 37px
    margin-left: 23px
    border: none
    display: flex
    justify-content: center
    align-items: center
    
.avanced
    padding: 1rem 3rem
    text-align: center
    background: linear-gradient(140deg, rgb(243, 210, 60) 0%, orange 100%)
    border: none
    font-weight: bold
    letter-spacing: 0px
    border-radius: 50px
    margin-bottom: 40px
    color: #FFF
    margin-left: 130px
    margin-top: 47px
    cursor: pointer
    font-family: "Roboto"
    text-transform: uppercase

.video
    fill: currentColor
    width: 1em
    height: 1em
    position: absolute
    margin: 0px 0px 0px 30px
    font-size: 1rem

.question
    font-size: 1rem
    position: absolute
    margin: -5px 0px 0px 5px

.button-help
    background-color: #074d47 !important
    border-radius: 100%
    border: none
    width: 45px
    height: 45px
    float: right
    margin-top: 165px
    margin-right: 15px

.content
    width: 99%
    height: 100vh
    margin-right: 20px
    margin-left: 20px

.input-group
    position: relative
    display: flex
    flex-wrap: wrap // For form validation feedback
    align-items: stretch
    width: 100%


h3
    padding: 2rem 2rem 0px
    font-size: 1.5rem
    font-weight: 600
    text-align: center
    font-family: Roboto, sans-serif
    margin: 0px
    padding: 0px
1
  • Can you edit your question to fix the code formatting? Some of the code hasn't ended up in the code block, which makes it harder to read. It looks like everything is inside of two separate instances of @media screen and (max-width: 600px), but with the formatting it's hard to tell. Commented Sep 21, 2022 at 18:38

1 Answer 1

0

You wrote twice @media screen and (max-width: 600px).

you should have
@media screen and (max-width: 600px) // for mobile.
and @media screen and (min-width: 601px) // for desktop.

or

@media screen and (max-width: 599px) // for mobile.
and @media screen and (min-width: 600px) // for desktop.

or doing mobile first:
@media screen // default.
and do overriding CSS rules within:
@media screen and (min-width: 600px) // for desktop.

2
  • now it was, thank you very much, I didn't know I had to put it inside a @media query too, I thought I just needed to do the mobile part, but anyway, thank you very much for the help :) Commented Sep 21, 2022 at 19:23
  • You're welcome , please - if it works - indicate the solution is found ;-)
    – Lionel-fr
    Commented Sep 22, 2022 at 20:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.