Fixed element position on all browser sizes

  • 22 June 2015
  • 3 replies
  • 103 views

Is there a simple way to align a button to a position with independence from the browser window size? The button should stay in the same position relative to the browser window in different resolutions. 


3 replies

Hi Mattis,

This is a tricky situation. The short answer is yes, you would need to use an Absolute position in the css and apply a css style to the element in question but using a percentage rather than a set value.

This has other knock on effects though, setting an element to use an absolute position takes it out of the normal flow of the document (think the way things wrap, scale, stack etc) and it can sometimes be tricky to get the other elements to behave exactly how you want in different size view ports and different browsers.

Hope that helps a little.

Cheers

Stuart.

thank you for the very fast reply! 

If I get it right… in the case I would like to center my button both horizontally and vertically on all viewports would this do the job?

  
 
  
#lp-pom-button-43 { 
position: absolute;

   
.lp-pom-button { 
top: 50%;
}   
    

assuming your buttons element name is #lp-pom-button-43 then you could use

#lp-pom-button-43 {
position: absolute;
top: 50%;
left: 50%;
}

although you might not want 50% as that will position the element with the top left corner in the center of the screen, you need to allow for the size of the element as well. Being the fact its only a button its probably only a small adjustment. 

I seriously recommend that if your going to work in percentages that you do it throughout your design as much as possible. 

If I’m honest I just wish there was support for bootstrap or some other kind of responsive framework, however don’t forget that you can enable to mobile view and edit the mobile version from the page builder and test to see how it looks on mobile moving/resizing elements accordingly.

I wonder if that’s more the kind of functionality your after?

Feel free to pick my brains, it’ll pop through on my email and I’ll answer it as best I can.

Cheers
 
Stuart  :)

Reply