Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 4, 2020 at 1:20 pm #1170224
    marcoabis81

    Hi guys,
    I tried this CSS to make the logo size smaller on only mobile but unfortunately it does not work. It works on the preview on inspect element but once I save it on the CSS it creates a new class and even if I set important it does not work.
    2020-01-04_1119

    /* Size logo */
    @media only screen and (max-width: 767px) {
    .responsive .logo img {
    max-width: 75% !important;
    } }

    Should I change something?

    Thanks,
    Marco

    January 4, 2020 at 7:35 pm #1170331
    Victoria

    Hey marcoabis81,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive .logo img {
    width: 75%;
  } 
}

    But you need to decrease the value, 75% is making it bigger.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    January 5, 2020 at 5:48 pm #1170475
    marcoabis81

    Hi Victoria,
    I had already tried this code but it did not work.

    Is there another solution rather than putting the code into themes/enfold/css/custom.css??

    I am not very familiar with that and I would like to have all the changes via CSS code easy to reach and change again.

    Thanks,
    Marco

    January 5, 2020 at 7:42 pm #1170511
    Victoria

    Hi Marco,

    Best regards,
    Victoria

    January 5, 2020 at 8:18 pm #1170536
    marcoabis81

    I see, you are totally right :-)
    So, I managed to have the logo smaller, but how can I make the top header height smaller? (only on mobile)

    For example, I set now the logo to be 45%. How can I reduce the space above and below the logo that we have created by making the logo smaller?

    thanks,
    Marco

    January 5, 2020 at 8:51 pm #1170552
    Victoria

    Hi Marco,

    Please add this code too:

    
@media only screen and (max-width: 767px) {
  .responsive #top .logo {
       height: auto !important;
  }
}

    Best regards,
    Victoria

    January 5, 2020 at 9:13 pm #1170559
    marcoabis81

    Amazing,
    many thanks Victoria, looks nicer on the mobile now :-)

    January 6, 2020 at 5:07 am #1170619
    Ismael

    Hi,

    Awesome! Glad we could be of help. Please don’t hesitate to open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.