reduce size screen

In wordpress twenty fourteen how do I reduce the size of the screen like
http://www.eternea.org/

Currently the webpage takes up the whole screen on a laptop  but on smaller devices I want the website to take uo the width of the screen
jagguyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
This link discusses the responsive features of the WP twenty fourteen theme.

http://www.wpstand.com/wordpress/themes/twenty-fourteen-wordpress-theme-responsive-fullscreen-layout.html
0
Ray PaseurCommented:
2013 was the year of "responsive design."  Twitter Bootstrap is widely praised as one of the right tools.  You may also like this introduction to the Grid, where the references and further reading sections are very well chosen.
http://www.adamkaplan.me/grid/
0
jagguyAuthor Commented:
Hi,

My question is that I want to modify the width of the website so it doesnt take up the full screen.
The above posts which are interesting but dont address this.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Ray PaseurCommented:
Have you tried to use CSS and set a width attribute on the container element?
http://codex.wordpress.org/Finding_Your_CSS_Styles

In related news, I don't think the Eternea site is a very good model to learn from!
0
jagguyAuthor Commented:
Yes I know how to set the width in css but in a wordpress site it doesnt do as expected.
This sets the width but hides part of the website on resize.
My question is about what can be done with twenty fourteen as I am wasting too much time with fiddling with css lookng at other links.

I tried this style. I would prefer not to keep chasing other possible answers on other links.

.site {
	background-color: #fff;
	max-width: 1060px;
	position: relative; left:8%;
	
}

Open in new window


also in css you are supposed to to do this but in wordpress how do I add a wrap tag?

#wrap {
      width: 900px;
      margin: 0 auto;
}

<html>
<head>
	<title>My Site</title>
</head>
<body>
<div id="wrap">

		<!-- WEBSITE GOES HERE -->

</div>
</body>
</html>

Open in new window

0
James RodgersWeb Applications DeveloperCommented:
Yes I know how to set the width in css but in a wordpress site it doesnt do as expected.

1.

What is not happening that you think should be happening?

2.

What is happening that you think should not be happening?
be specific, provide screenshots.

if you want a fixed width twentyfourteen is not the theme for you to use
but if you really want, you can do something like this but that defeats the purpose of twentyfourteen and mobile friendly
.site {
	background-color: #fff;
	max-width: 1060px;
	min-width: 1060px;
	width:1060px;
	position: relative; left:8%;
	
}

Open in new window


also in css you are supposed to to do this but in wordpress how do I add a wrap tag?
if you are not sure what you are doing do not alter theme files except for the CSS
0
jagguyAuthor Commented:
I am happy with twenty fourteen it is just the full screen display for non-mobile devices.

For a full screen on pc or laptop I want a not so wide display. An ipad or mobile for full screen is fine.

This code needs to be in a media query? I can send screen shots later when I have more time

.site {
      background-color: #fff;
      max-width: 1060px;
      min-width: 1060px;
      width:1060px;
      position: relative; left:8%;
      
}
0
jagguyAuthor Commented:
OK this seems to work to what I want on many devices.
.site {
	background-color: #fff;
	max-width: 960px;
	position: relative; left:0%;
	
}

Open in new window


I might close the thread, thanks for the help
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jagguyAuthor Commented:
I found the solution
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.