Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Broken icons on mobile version

Icons in header breaks mobile alignment
    • 5 years, 10 months ago GTP_Dutchy
      Participant

      Hello,

      I’ve added two icons in the header of my website. However they seem to break the mobile version. nothing aligns anymore.

      the site is roelofsmetrology.nl

    • 5 years, 10 months ago Mirela
      Participant

      Hello,

      Add this code into your custom css box:

      @media (max-width: 480px){
      .header_container > .main {
           line-height: 20px !important;
      }
      .cl-icon-text {
          min-width: 180px !important;
      }
      .main.header-row .c-middle {
          display: flow-root !important;
          min-width: 150px !important;
      }
      .header-row .header-row-inner .header-col {
          width: 100% !important;
          float: left !important;
      }
      .header-el .cl-icon-text i {
          padding-right: 0 !important;
      }
      .header-col .header-el {
          width: 145px !important;
          float: left !important;
          height: 50px !important;
          line-height: 20px !important;
      }
      }

      Result screenshot: https://ibb.co/Q6HbChx

      Best regards!

    • 5 years, 10 months ago GTP_Dutchy
      Participant

      Thank you, that fixed it for me

    • 5 years, 10 months ago GTP_Dutchy
      Participant

      Sorry yesterday when presenting to the client it didn’t work on an iphone 6

    • 5 years, 6 months ago GTP_Dutchy
      Participant

      Can i get an reply on this issue?

    • 5 years, 6 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      Try editing the max-width: 480px to max-width: 767px.

      Let us know.
      Best regards!

Viewing 5 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password