-
AuthorPosts
-
July 30, 2014 at 7:34 pm #297887
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 galleryThe 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
StevenAugust 1, 2014 at 5:11 am #298572Hi Steven!
Have you tried using a Blank Template?
Best regards,
JosueAugust 15, 2014 at 1:52 am #304664Hi, 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
StevenAugust 15, 2014 at 3:55 am #304681Hey 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,
JosueAugust 15, 2014 at 11:21 am #304836Hi 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.pngAnd sorry, I did mean center content vertically!
Thanks in advance
StevenAugust 15, 2014 at 7:02 pm #305036Hey 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,
JosueAugust 15, 2014 at 7:48 pm #305049Hi 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
StevenAugust 15, 2014 at 8:43 pm #305074Hey!
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!
JosueAugust 15, 2014 at 10:34 pm #305103HI 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.pngAlso, are you able to provide the code for centering content vertically on both sections.
Thanks
StevenAugust 15, 2014 at 11:48 pm #305119Hi,
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, 4 months ago by Josue.
August 16, 2014 at 12:14 am #305125Hi,
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,
JosueAugust 16, 2014 at 1:24 am #305139Thanks 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
StevenAugust 16, 2014 at 1:43 am #305146Hi 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,
JosueAugust 16, 2014 at 2:40 am #305154That 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
StevenAugust 16, 2014 at 2:42 am #305155Hey Steven!
Yes, try:
#home-shop-section { height: 0 !important; min-height: 0 !important; }
Regards,
Josue -
AuthorPosts
- The topic ‘Fullwidth slider above a full screen gallery NOT WORKING’ is closed to new replies.