Announcement

Collapse
No announcement yet.

Forcing the hero image to be something different on mobile so it looks better

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Forcing the hero image to be something different on mobile so it looks better

    I want my hero image to look better on mobile. I have made a seperate mobile image as the main one simply does not shrink down nicely. Is there a way to change it out below 768px screen size?

    www.vitavibe.com

    My CSS related to the hero image is:

    HTML Code:
    /*Home Carousel SlideShow*/
    
    #homeCarousel {
       margin-bottom: 30px;
    }
    
    #homeCarousel ul li a img {
       width: 100% !important;
       max-width: 1920px;
       margin: auto;
    }
    
    #homeCarousel ul li a:hover img {
       opacity: 1;
       filter: alpha(opacity=100);
    }
    
    #homeCarousel .flex-direction-nav li a {
       font-size: 0;
       width: 72px;
       height: 72px;
       margin-top: -36px;
       background: url('../images/sprite-icons.png')no-repeat;
    }
    
    #homeCarousel .flex-direction-nav li a::before {
       display: none;
    }
    
    #homeCarousel .flex-direction-nav li a.flex-prev {
       left: 10%;
       background-position: 0 -150px;
    }
    
    #homeCarousel .flex-direction-nav li a.flex-next {
       right: 10%;
       background-position: 0 -250px;
    }
    
    .flex-control-paging {
       z-index: 10;
       bottom: 10px !important;
    }
    
    .flex-control-paging li {
       margin: 0 4px !important;
    }
    
    .flex-control-paging li a {
       width: 16px !important;
       height: 16px !important;
       background: url('../images/sprite-icons.png') -100px -100px no-repeat !important;
       box-shadow: none !important;
    }
    
    .flex-control-paging li a.flex-active {
       background-position: -50px -100px !important;
    }

  • #2
    very nice site ... excellent design .. one of the best for sure..is it reviews module part of ella theme? I'm guessing it's ella since I use behars..

    Comment


    • #3
      vita-vibe You are using the default carousel so the image replacement has to be done with some javascript but I see you are using just one image so you don't need to use the default homepage carousel module for just one image if you want to replace the image on mobile. you can simply add the hero banner within the home.html template which will make it easier for you to replace the image on mobile. You can use the code below and paste it below the home page carousel code in home.html. all you need to do is replace the href text with the link and upload images to the IMAGES folder within the admin and replace names of the images within the code below. Also, make sure to turn off the homepage carousel under Modules.

      <!-- start hero banner -->
      <div class="hero-banner">
      <div class="container">
      <a href="replace this text with the link">
      <img src="assets/images/desktop-image.jpg" class="desktop-hero-banner" alt="vita vibe">
      <img src="assets/images/mobile-image.jpg" class="mobile-hero-banner" alt="vita vibe">
      </a>
      </div>
      </div>

      <style>
      .hero-banner {
      margin-bottom: 30px;
      }
      .mobile-hero-banner{
      display: none;
      }
      @media(max-width:767px){
      .desktop-hero-banner{
      display: none;
      }
      .mobile-hero-banner{
      display: block;
      }
      }
      </style>
      <!-- end hero banner -->

      kalaja They are using the modified version of Ella theme but the reviews module is not part of the default Ella theme.
      tangopixel.com
      Website Design and Development

      Comment


      • #4
        Yes, we are using a HEAVILY modified version of the Ella theme. The themes 3dcart offers are all sub par in my opinion. I believe 3dcart can be a good base to build upon. 3dcart themes all seem stuck in 2004 or something.

        We are constantly trying to improve the look and operation of our website. We have taken the review block from the bicycle theme and other elements from blackdeers.

        https://bicycle-demo.myshopify.com/
        https://blackdeers-demo.myshopify.com/

        Even though they are shopify themes, the elements can be coded in to this one. At least many of them.

        I wondered if I was going to have to disable the built in home page carousel to do this. I added your code to the test store but for some reason it does not 100% fill. I tried adding some code to make it fill the space as it currently is on my website to no avail.

        http://newdev-vitavibe-com.3dcartstores.com/

        The modified code I tried:

        HTML Code:
        <!-- start hero banner -->
        <div class="hero-banner">
        <div class="container">
        <a href="replace this text with the link">
        <img src="assets/images/desktop-image.jpg" class="desktop-hero-banner" alt="vita vibe">
        <img src="assets/images/mobile-image.jpg" class="mobile-hero-banner" alt="vita vibe">
        </a>
        </div>
        </div>
        
        <style>
        .hero-banner {
        margin-bottom: 20px;
        width: 100% !important;
        max-width: 1920px
        }
        .mobile-hero-banner{
        display: none;
        }
        @media(max-width:767px){
        .desktop-hero-banner{
        display: none;
        }
        .mobile-hero-banner{
        display: block;
        }
        }
        </style>
        <!-- end hero banner -->

        Comment


        • #5
          You can try changing the following

          Code:
           
           <div class="container"> change to <div class="hero-container">

          Comment


          • #6
            JoeBTI correct. vita-vibe You can either remove the container class or change it to something else like Joe suggested if you want to show it full width.
            tangopixel.com
            Website Design and Development

            Comment


            • #7
              That changed it for the better! Now it looks so much nicer on mobile. If I want to use more than one image, I will need a new slider code I am guessing. For now, one image will work for us. Excellent help everyone! I appreciate it. I am a novice coder.

              Comment


              • #8
                I do have one more question. When you hover, it grays over the image. Is there a way to have it still clickable but not turn all grayed out upon hover? Its easy to do on mobile and it tends to stay grayed out until either fully clicked or clicked off of.

                Comment


                • #9
                  vita-vibe add this style to CSS for hover over effect.

                  .hero-banner a:hover > img {
                  opacity: 1;
                  }
                  tangopixel.com
                  Website Design and Development

                  Comment


                  • #10
                    That worked! Thanks for that!

                    Comment

                    Working...
                    X