CODEWITHSUNDEEP
htmlcsswordpresscss-position
JameJamson
JameJamson

Reputation: 11

HTML, CSS, Positioning and resolutions

So I am currently working on a project for a friend/client and I am having trouble with setting up a page that works on most resolutions, for example if someone opens the website on 1680 x 1050, 1920 x 1080 or anything in between or higher the page will work but obviously most of the elements will move nor will they re-size. My client opened the page on his laptop and the navigation bar I had created was half off the screen. Here are the pictures from my computer and his.

Picture from my computer (1680 x 1050) - http://gyazo.com/fa2fc9ee489c7059f8ba50e97057ce93

Picture from his laptop - http://gyazo.com/2fe8652be408925ce7a322a1638cfed8

<style>
.btn { width: 200px;}
.fixedbtns { position: absolute; margin-left: -250px; margin-top: -150px; }
.textleft  { text-align: left; border: 0; margin: 10px;}
.relative  { position: relative; }
#container { width: 400px; position: relative; }
</style>
<h2>Our Services</h2>
Strategy 4 Growth offers a variety of business consulting services to 
organisations who have not achieved their growth ambitions and / or capabilities 
and we can assist clients with specific strategic analysis, advice, leadership 
and strategy implementation and review. In any case the services offered will be 
tailored to meet specific customer requirements but are likely to contain 
elements of the individual services listed here.

<div class="fixedbtns">[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section1"]Business Growth Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section2"]Operating Model Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section3"]Digital Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section4"]IT Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section5"]Cloud Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section6"]Business Transformation[/button] 
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section7"]UK / EMEA Market Entry Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section8"]Business Process Outsourcing (BPO)[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section9"]Sales and Marketing Strategy[/button]
<br>
[button color="red" size="small" light="yes" icon="" open_in_new_window="no" link="#section10"]Strategic Planning[/button]

Here is the code, it is being done within the wordpress page text editor, currently doing most of the CSS for the buttons internally for now just easier to edit.

Upvotes: 1

Views: 57

Answers (1)

Lansana Camara
Lansana Camara

Reputation: 9873

.fixedbtns { position: absolute; margin-left: -250px; margin-top: -150px; }

Don't absolutely position things or you are causing them to be unresponsive and look strange on various screen resolutions - and in this case span off the screen because of the -250px part.

Rather, look into responsive web design.

Upvotes: 1

Related Questions