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

Mobile – Banner Image – Complete

    • 6 years, 9 months ago edgar
      Participant

      Hello,
      I need help to show the complete image of the main banner in the mobile view.
      Can do this with @media css?

      Nosotros


      Regards.

    • 6 years, 9 months ago Ruco
      Keymaster

      Hello,

      You have to upload a bigger image to have a fully image on mobile.

      Another option is to change the cover background in container but it will not look good:

      @media(max-width:767px){
      .bg-layer{
        background-size:contain !important;
      }
      
      }

      Regards!

    • 6 years, 9 months ago edgar
      Participant

      It’s there a way to show the complete image in a mobile view? it’s only showing a part of the image.
      And other thing, if you move to the left with your finger, appears a part of the background like if the mobile view ends.
      Can you help me with this?

      Home


      Regards.

    • 6 years, 9 months ago Mirela
      Participant

      Hello,

      Please add this code to remove the background line in mobile:

      @media(max-width:767px){
      #viewport {
          overflow-x: hidden;
      }
      }

      I checked the mobile header background and it looks ok. See screenshot: https://postimg.cc/bSggTkD3
      I suggest you clear cache and hard refresh site.

      Let us know.

      Best regards!

    • 6 years, 9 months ago edgar
      Participant

      Hello,

      yes, if I put the next CSS code, the site shows the complete image of the banner but only at the top of the div and the other images and the texts down:

      @media (max-width: 767px) {
      .bg-layer{
      background-size:contain !important;
      }
      }

      Is there’s a way to shows this image centered in all the div?
      I don’t want to modify the structure.

      Regards.

    • 6 years, 8 months ago Mirela
      Participant

      Hello,

      I understand what you want now. Please edit the code to this:

      @media (max-width: 767px) {
      .bg-layer{
         background-position: center center !important;
          background-size: initial !important;
      }}

      Try removing one of the attributes at a time and check the result. You can keep them both (position and size), or keep just one..depending on the result you want.

      Let me know.
      Best regards!

    • 6 years, 8 months ago edgar
      Participant

      That works great!
      Thank you.
      Regards.

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