Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 5, 2016 at 12:34 pm #720435
    waveshaper

    Hi Kriesi

    In my header element i placed some html to advertise a special and added a background color to my contact number.
    It breaks in mobile view.

    1. How would you suggest I style it for mobile or hide it on mobile?
    2. Is there a way to place an image below the header element next to the logo to the right below the social icons in the white open space?

    Thank you for your time.

    December 6, 2016 at 8:41 am #720881
    Rikard

    Hey waveshaper,

    I think it would be better if you hide the header information on mobile:

    
@media only screen and (max-width: 767px) {
.phone-info {
  display:none;
}
}

    And add a Color Section to the page and only show it for mobile. Add an ID to it and hide it for all other screen sizes with CSS like this:

    @media only screen and (min-width: 768px) {
  #your-section-id {
    display:none; 
}
}

    Best regards,
    Rikard

    December 6, 2016 at 1:57 pm #720984
    waveshaper

    Hey Rikard
    Thank you so much and especially for explaining it to me.
    This is how we learn so we don’t bother you too much in future.
    Client for life.
    cheers

    December 6, 2016 at 3:41 pm #721079
    Vinay

    Hi,

    Glad we could help!
    We really appreciate it if you rate our theme on themeforest https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Vinay

    • This reply was modified 7 years, 11 months ago by Vinay.
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Header element breaks on mobile CSS question.’ is closed to new replies.