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

Responsive Headers

cssheaderipadiphoneresponsive
    • 10 years, 4 months ago joshkallmeyer
      Participant

      Expired

      Hey guys,

      I’m working on a website for my client (https://theenergyeditor.com), and I’ve made those page headers for her. The only thing is, they need to appropriate sizing when shrunk on a smaller screen. For now, they just get cut off.

       

      What settings do I need to have the header to appear normal (like the below image) and so the full image appears on an iPhone and iPad?

       

       

      Thanks guys!

    • 10 years, 4 months ago Ruco
      Keymaster

      Hello,

      Please use this css code:

      @media (max-width: 979px){
      .header_page.centered {
      height: 300px !important;
      }}

      Add it at custom css code at general options.

      Best regards!

    • 10 years, 4 months ago akinyemifemi
      Participant

      Expired

      Hello,

      I am having same issues.

      My images are not responsive on ipad and iphone.

      Also, the slides (Codeless) titles and buttons go toward the left and get hidden on ipads, and Iphones. I’ve not been able to test on other devices.

      What can i do please?

      Thank you

    • 10 years, 4 months ago Ruco
      Keymaster

      Hello,

      Please can you show us your site url?

      Best regard!

    • 10 years, 3 months ago joshkallmeyer
      Participant

      Expired

      This coding still isn’t working.

    • 10 years, 3 months ago Ruco
      Keymaster

      Hello,

      If you can give me your site credentials I can do it for you.

      Best regards!

      • 10 years, 3 months ago joshkallmeyer
        Participant

        Expired

        This reply has been marked as private.
    • 10 years, 3 months ago Mirela
      Participant

      Hello,


      @joshkallmeyer
      ,
      I have added this code:

      @media (max-width: 767px){
      .header_page, .header_page {
      height: 150px !important;
      }
      }

      into your custom css box. This is how it looks now, screenshot.
      Let me know if you need further help.

      Best regards!

      • This reply was modified 10 years, 3 months ago by Mirela.
    • 10 years, 3 months ago joshkallmeyer
      Participant

      Expired

      Thank you!

      It looks great on the computer, but on my iPhone.. it hasn’t changed.

      Look at this screenshot, using Safari on my iPhone 6. I did clear the cache.

       

       

    • 10 years, 3 months ago Ruco
      Keymaster

      Hello,

      I fixed it. Checked it on iphone and it looks good. Please give it a look and let me know.

      There is an issue with the video on the footer on responsive, there is a blank space at the right side because the video size is 560px (you have added the video with iframe).

      Try to make it smaller or add it by using different element.

      Best regards!

Viewing 8 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