-
Posts
-
Hi guys
I love what you’ve done with the fullscreen slider options, embedding the possibility of having two buttons and such. Enabling the Enya Fold Portfolio Frontpage. Awesome stuff!
Two downsides: when removing header, menu and footer, making it fullscreen, a scroll bar appears, thanks to 1 or 2 obnoxious little pixels ;-) See http://tuxpixels.com/frontpage/ . And, I’d like to have 3 or 4 buttons for this website. See http://tuxpixels.com
I’ve been thinking this through. Using the LayerSlider, using a Color Section, and using your Fullscreen Slider options. The LayerSlider doesn’t use the layout builder, hence bye bye easily placed buttons. The Fullscreen Slider provides me with max two buttons. So I’ve used the Color Section option. Which looks rather nice, entering a website aiming to sell photography on canvas etc. Yet, when resizing the window…
Case: I’ve used 1/5 columns, placing buttons in the 2nd, 3rd and 4th. There’s a Title element on top. The color section is set to be at least 100% of browser height. And I’ve utilized the whitespace twice. Simply perfect, if one image is all I want to show. Untill I go resizing the browser window (I have a standard screen size of 1600x900px btw). When downsizing first the page logically gets a scroll bar, and later the three buttons suddenly jump positions, upwards/downwards stepswise. And I reckon the position of text and button will be off, on the most impressive screens. Now the buttons appear perfectly in the water. And the title fits prefectly well into the air. But that’s due to my screen size.
So. The question I want to ask is this: could you think of a way I can use a fullscreen pic or slider, AND have both the title and the buttons always appear in a certain area? Like, the title horizontally centered being always in the sky-area, and the buttons always being in the water area. Do you guys see of a way I can make this work? Any (not too pretty) quickfix would be perfect! :)
(perhaps the ‘easiest’ way would be something like a whitespace seperating the two elements, yet not in px but in % of browser window height, or having the two elements stick to bottom/top of page with a certain padding… I don’t know…)
Thanks!!
Hey Remco!
It already appeared center when I viewed your link. Did you get this sorted? If your still having problems then take a screenshot and highlight what your trying to do so we can get a better idea.
As for having more than two buttons you can use our button shortcode inside the caption text instead.
Cheers!
ElliottHi Elliot.
Thanks for your response. Indeed I could use the shortcode. Yet, that would be convenient when using the LayerSlider e.g. And that means I cannot go for the vertical screen-filling effect I wish for. Hence, the easy way I chose: a color section with e.g. buttons in it.
Thing is, what happens when resizing is this – http://tuxpixels.com/screen-resized/ – that should explain it perfectly.
HI Remco ;
Have you tried to ;
1- give an “id” to your color section,
2- adjust the elements in it by media queries ;
a- to hide the “hr” element of 460px – or change the height,
b- define a different “float” for the buttons in 1/3 boxes.That actually sounds perfect. Thank you, @begrafiks! Now if only I knew what you mean exactly… I do see what you mean, in an abstract way. It’s the media queries that make me go “ahmmmm…”. I lack any technical background ;)
Sounds like I could understand it though. Any place I can find references perhaps? Don’t need to waste your time teaching me from the bottom up of course. Sounds like a solution to me!
Hi Remco Geelen ;
these lines could help you :The class of your Home page (http://tuxpixels.com/) as element is
.page-id-462The construction that I’ve tested on my local is below :
color section (give an id= your-color-section)
Special heading tag + Subheading below
hr (460px)
1/5
1/5 (first button, position = center)
1/5 (second button, position = center)
1/5 (third button, position = center)
1/5For smaller screen and/or digital tablets :
1 – “TUX PIXELS” placed higher
2 – Blank space under “TUX PIXELS” smaller@media screen and (min-width: 768px) and (max-width: 990px) { /* Add your Mobile Styles (Digital tablet) here */ .page-id-462 .avia-section.av-minimum-height .container .content{vertical-align: top !important;padding-top:100px !important;} #your-color-section .hr{height:25px !important;} }For smaller screen (telephone) :
1 – “TUX PIXELS” placed (more) higher
2 – Blank space under “TUX PIXELS” (more) smaller@media only screen and (max-width: 767px) { /* Add your Mobile Styles (telephone) here */ .page-id-462 .avia-section.av-minimum-height .container .content{vertical-align: top !important;padding-top:50px !important;} #your-color-section .hr{height:25px !important;} }@begrafiks Thank you SO much for taking the time to help me. Very very much appreciated!
And thank you too @ismael …or, Sean ;)
Will try and make this work asap!– – – –
30 mins later: yay!!! This is fun!!! I wish I hadn’t chosen Business Administration 15 years ago, but programming/designing instead :)
- The topic ‘A typical frontpage, optimally responsive’ is closed to new replies.