Floating widgets

I am customising the Intro theme for my blog. I am designing a new full screen front page with an edge-to-edge background image and only a couple of buttons to be displayed at the bottom of the page.

Problem: the location of the buttons is fixed and so disappear in small screens. They are not visible unless one scrolls down.

I wonder whether they can be made to float at a certain distance from the top of the page, regardless of the screen size used for viewing.

Thanks much in advance!



you can use media query and adjust the top css rule for the button from there.

post the URL of your site here if you need assist :slight_smile:

Thanks. This is a test site.
Address: http://http://testsite.livejazzlounge.com/
I would like the buttons and the tile to always display at a given distance from teh LOWER end of the scree, regardless the size of the monitor. As of now, this page looks great in my 27inch iMac. Mut it does not in my 11inch MacBook Air.
If you have a piece of code that can be place somewhere (where?) that can do this, I would be veyr much obliged.

I just checking your site, and I think you already make some modification to the default theme? I dont see the default header area from your site.

I recommend you to use the default header area from the theme, because the theme already covered what you need about the button.

I do not wish to have a header image or a header at all.
I have entered paramaters in the header area but nothing happened.

How can I sedn you a screenshot?
It doesn’t seem to be possible to send attachemtns in this forum.

In fact, I’d also like to get rid of the black bar at the very top.

you can upload the screenshot to imgurl or dropbox or something else, then post the link here.

why you dont like to use the default header area? but then you create a section that similar with header area? :smiley:

I recommend you to use the default header area because your current header area need an advance customization to meet what you need, and we can’t help you to achieve that. But you can have full support from codeable to make it possible

I dont want the header at the top. I dont want a black bar. I dont want an icon or a header image.
This is what I entered:

I see, I think those header setting are not working because you did not assign the home page as “Front page” http://prntscr.com/9ajqsf

Yes, I did.
But I did not titled as “Front page”.
If I do, the silly text “FRONT PAGE” appears in the top of the home page.

Awan, how do I get rid of this black strip across the screen?
Please help!


About the front page, you dont have to named your page as Front Page, you just need to assign your page to the static page > front page

And about the black strip, you can remove it using these css code:

.home footer#footer {
    display: none;

Thanks good.

Now, I still dont know how to make the buttons floating in the page.


To make the buttons floating when it displayed in mobile device, please try this css code:

@media only screen and (max-width : 992px) {
  article#post-5 {
    position: relative;
    top: -100px;

  article#post-5 .ow-button-base.ow-button-align-right, article#post-5 .ow-button-base.ow-button-align-left {
    text-align: center;

I care more about computer monitors of different sizes. Say from 1440px in height (like in my 27inch iMac) to 768px (as in my 11inch Macbook Air).

Oh I think I didnt understand enough about this issue, can you explain more? and please take a screenshot also if it possible.

I hope we can resolve this.

Here is a screenshot of how the test homepage looks like in a 27inch iMac:

And here is how it looks like in a 11inch MacBook Air:

Here the title (“Live Jazz Lounge 4 Years”) and the buttons are not visible. One needs to scroll down the home page to see them. Not great.

It would be very useful if the widgets showing the title and the buttons would “float upwards” in the smaller screen so that the user does not need to scroll down to see them.

Is it clearer now?

I love the full scren format. This would be very cool.



By the way, you can see the homepage and test by yourself here:

I think I have solved this problem. See here http://testsite.livejazzlounge.com

I had not realized that the header area only works until one sets some image as header image. The problem had been that I didn’t want any header image, but just the background image as full screen from top to bottom.
So, I uploaded a black line 1920px width x 1px height as header image and the header area now works. I find it really weird that one has to trick the system in this way. The header area shoudl be functional even if one does not haev a header image. You see, if you look carefully, you can see the 1px thick balck line at the top of the site. I can live with that, but if you have a way to get rid of that, even better.
Now the title and buttons are dyanmically adjusted using the % function in header area. Great!

I would like to edit the look (size, no-all-capitals, etc.) of the heading showed before the animated text, as well as the animated text itself. Also, it woudl be nice if one coudl have some control over the size, shape and font sizees of the buttons. In regular pages, these buttons can be readily editied with the SiteOrigin widgets but apparently not on the header area. How does one do all this?

Many thanks! I feel I am now begining to use the full potential of the theme. I am getting closer and closer!