Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • July 30, 2014 at 7:34 pm #297887
    bleepstudio

    Hi, I would like to amend the homepage on the website to have the content below but when I use the avia builder the content doesn’t go full width. The layout I would like is:
    1. No header
    2. Color section 75% full height with full width image slider
    3. Color section 25% full height with text links
    4. Below this is a full screen gallery

    The issues with these points are:
    1. I can’t remove the header and padding, I have tried using .page-id-3633 #header {display: none;} .page-id-3633 .html_header_top.html_header_sticky.html_bottom_nav_header #main {padding-top: 0px;}
    2. I can’t find the right combination of full width image slider and color section
    4. When I place the gallery into a color section (so I can add an anchor) the content doesn’t go full width.

    Login details in private content, hope you can help.
    Thanks
    Steven

    August 1, 2014 at 5:11 am #298572
    Josue

    Hi Steven!

    Have you tried using a Blank Template?

    Best regards,
    Josue

    August 15, 2014 at 1:52 am #304664
    bleepstudio

    Hi, I’ve kind of got it working in a blank template with an Easyslider and images at 1500×630.

    http://christianmacleod.com/a_home_collection_3/

    1. How can I center the content in the 75% section and the 25% section?

    2. The bottom 25% is not visible when viewed in landscape ipad or mobile. Can you advise how to fix this?

    3. Is it possible to have the images fade in and out to white (instead of crossfade)?

    Thanks
    Steven

    August 15, 2014 at 3:55 am #304681
    Josue

    Hey Steven!

    1. They look centered to me, do you mean vertically centered?

    2. Can you post a screenshot of this? i don’t know exactly what you mean.

    3. Try adding this to Quick CSS:

    .avia-slideshow-inner li:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: white;
    opacity: 1;
    transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
}
.avia-slideshow-inner li.active-slide:after{
    opacity: 0;
}

    Regards,
    Josue

    August 15, 2014 at 11:21 am #304836
    bleepstudio

    Hi Josue,

    The image fade code works great, thanks.

    Please see links to screenshots of a smaller display size, ipad and mobile, showing the bottom 25% mostly hidden.
    http://christianmacleod.com/wp-content/uploads/2014/08/photo-1.png
    http://christianmacleod.com/wp-content/uploads/2014/08/photo-2.png
    http://christianmacleod.com/wp-content/uploads/2014/08/photo-3.png
    http://christianmacleod.com/wp-content/uploads/2014/08/photo-4.png

    And sorry, I did mean center content vertically!

    Thanks in advance
    Steven

    August 15, 2014 at 7:02 pm #305036
    Josue

    Hey Steven!

    The screenshot you posted are not working (404 error).

    Regarding the other question, the slider is seems centered to me, perhaps you want to push it a little bit down:

    #av_section_1 .content {
    top: 25px;
    position: relative;
}

    Best regards,
    Josue

    August 15, 2014 at 7:48 pm #305049
    bleepstudio

    Hi Josue, sorry about the image links, these are now viewable at:
    http://bleepstudio.com/_images/photo_1.png
    http://bleepstudio.com/_images/photo_2.png
    http://bleepstudio.com/_images/photo_3.png
    http://bleepstudio.com/_images/photo_4.png
    You can see the bottom 25% section does not fully appear in certain display sizes, I would like to see all of the 25% section and have the text centred vertically.

    And I would like the images centered vertically in the top 75% section, the new code didn’t appear to change anything.

    Thanks
    Steven

    August 15, 2014 at 8:43 pm #305074
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    @media only screen and (max-width: 989px) {
    .av-minimum-height-75 .container {
        height: auto !important;
    }
}

    That will reduce the height of the 75% container on smaller screens, leaving more space for the section below.

    Cheers! 
    Josue

    August 15, 2014 at 10:34 pm #305103
    bleepstudio

    HI Josue,

    I’m afraid that didn’t work, on ipad landscape the bottom section was still partly missing and in portrait view the 75% section jumped halfway up the page…
    http://bleepstudio.com/_images/photo_5.png
    http://bleepstudio.com/_images/photo_6.png

    Also, are you able to provide the code for centering content vertically on both sections.

    Thanks
    Steven

    August 15, 2014 at 11:48 pm #305119
    Josue

    Hi,

    Can you please create me an administrator account? post it here as a private reply.

    Edit: Nevermind, i just saw them on your first post, i’ll try to do some adjustments.

    Regards,
    Josue

    • This reply was modified 10 years, 3 months ago by Josue.
    August 16, 2014 at 12:14 am #305125
    Josue

    Hi,

    The problem is that the color sections height setting works as minimum height, not maximum height, so you must be careful of what content you put there.

    Please review the site now, the adjustments i made were:
    1. Reduced the slider image size setting (1500×430) so it doesn’t overflow the 75% maximum height.
    2. Removed the hr separator (this creates too much extra space) in the 25% section and instead used a border-top CSS:

    #bottom-section {
    border-top: 5px solid black;
}

    Best regards,
    Josue

    August 16, 2014 at 1:24 am #305139
    bleepstudio

    Thanks for making those changes, Josue.

    Could we keep the larger image size by changing the 75% minimum height to 90%, and the 25% minimum to 10%?

    Thanks
    Steven

    August 16, 2014 at 1:43 am #305146
    Josue

    Hi Steven!

    Yes, that’s possible, but does require you to edit the theme files, specifically js/shortcodes.js, lines 2009, 2010, 2011:

    				wh75		= Math.round( wh100 * 0.75 ),
				wh50		= Math.round( wh100 * 0.5  ),
				wh25		= Math.round( wh100 * 0.25 );

    Change them to:

    				wh75		= Math.round( wh100 * 0.9 ),
				wh50		= Math.round( wh100 * 0.5  ),
				wh25		= Math.round( wh100 * 0.1 );

    Best regards,
    Josue

    August 16, 2014 at 2:40 am #305154
    bleepstudio

    That works, great – thank you so much!!

    One last thing, I had to add a color section to create an anchor (as I couldn’t place my masonry gallery in the color section and keep it full width), is it possible to change the height of the small anchor color-section to 0px ?

    http://bleepstudio.com/_images/photo_7.png

    Thanks again
    Steven

    August 16, 2014 at 2:42 am #305155
    Josue

    Hey Steven!

    Yes, try:

    #home-shop-section {
    height: 0 !important;
    min-height: 0 !important;
}

    Regards,
    Josue

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Fullwidth slider above a full screen gallery NOT WORKING’ is closed to new replies.