Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 25, 2017 at 9:19 pm #766737
    Lukerk

    Hello everyone, thought I had this solved but couldn’t quite get it figured!

    I’m trying to make my home page section images have a full image on mobile, and stretch fill on desktop.

    Also if possible I’d like to move the buttons under the headers (on-top the section images) on mobile so they don’t look staggered

    Screenshots below. Also I should add this is my first time making a website!

    Desktop
    [IMG]http://i68.tinypic.com/2n8staa.png[/IMG]
    Mobile
    [IMG]http://i64.tinypic.com/x2tnqb.png[/IMG]

    March 26, 2017 at 12:53 am #766780
    Jordan Shannon

    Hey Lukerk,

    Would you be able to provide login info so that I can look into this further and add the required css? And, just to clarify you want to the background image to stretch the full width of the mobile screen?

    Best regards,
    Jordan Shannon

    March 26, 2017 at 3:49 am #766793
    Lukerk

    Yes I want the image to stay the same way as it is on the desktop site but be full size on mobile.

    March 26, 2017 at 8:24 am #766875
    John Torvik

    Hi,

    To have the same quality in the mobile, you need to add this custom CSS code at Enfold Theme Options > General Styling > Quick CSS

    
@media screen and (max-width: 480px) {
    #main .av-parallax-inner {
      background-size: inherit !important;
    }
}

    Now, to align the buttons, add this custom CSS code:

    
@media screen and (max-width: 480px) {
    #main .entry-content-wrapper {
      text-align: center !important;
    }

    /* this code will align the first button */

   #main .avia-builder-el-2 {
     right: 60px;
   }
}

    Best regards,
    John Torvik

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.