Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

reduce size screen

Posted on 2014-02-25
9
316 Views
Last Modified: 2014-03-04
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
0
Comment
Question by:jagguy
9 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39885494
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
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39885616
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
 

Author Comment

by:jagguy
ID: 39888449
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39888851
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
 

Author Comment

by:jagguy
ID: 39890358
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
 
LVL 25

Expert Comment

by:James Rodgers
ID: 39890662
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
 

Author Comment

by:jagguy
ID: 39890844
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
 

Accepted Solution

by:
jagguy earned 0 total points
ID: 39891606
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
 

Author Closing Comment

by:jagguy
ID: 39902806
I found the solution
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hide un-named HTML Label with CSS 14 36
Open iframe using jquery dialog box 13 37
Help with PHP 13 27
How does PHP Storm display on Linux high resolution laptops? 1 36
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question