Sundance help with CSS code to centralize content for full width page

  • Unknown's avatar
    biomike1 · Member ·

    I would like the option to have a full width page, but it would appear that content is off set to the right. Please see https://wildforestgym.wordpress.com/test-page-index/

    Currently viewing on firefox.

    Here is my current CSS code. below.

    Thanks

    Michael

    body.custom-colors #page, body.custom-background.custom-background-image-empty #page {
	background: #ffffff;
}

footer.entry-meta {
	display: none;
}

h3, h2, h1 {
	color: #5B0012;
}

.wf-active .main-navigation a {
	font-size: 13px;
}

img.alignleft, img.alignright, img.aligncenter {
	padding: 0;
}

.featured-content img, .site-header img, .entry-content img, img[class*="align"], img[class*="wp-image-"] {
	padding: 0;
}

#page {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

.site-header img {
	max-height: 95px;
	visibility: hidden;
}

.main-navigation {
	margin: 0;
	position: absolute;
	top: 178px;
	width: 100%;
}

.main-navigation ul {
	padding-left: 10%;
	padding-right: 10%;
}

.menu-main-container {
	background-color: #000000;
	height: 30px;
	width: 100%;
	padding-top: 5px;
}

.main-navigation a {
	color: #FFFFFF;
}

.main-navigation a:hover, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.
current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
	color: #FF6600;
}

.main-navigation ul ul :hover > a, .main-navigation ul ul a:hover, .main-navigation ul ul li.current_page_item > a, .main-navigation ul ul li.current-menu-item > a, .main-navigation ul ul li.current_page_ancestor > a, .main-navigation ul ul li.current-menu-ancestor > a {
	background-color: #000000;
	color: #FF6600;
}

.main-navigation ul ul {
	background-color: #000000;
}

.main-navigation a:hover, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
	color: #FF6600;
}

.site-header {
	background: url('http://wildforestgym.files.wordpress.com/2014/03/header_21-4.jpg') no-repeat scroll center bottom rgba(0,0,0,0);
	height: 177px;
}

.site-header img {
	visibility: hidden;
	max-height: 148px;
}

.hentry {
	margin-left: 50px;
}

#content {
	margin-right: 30%;
}

.site-content {
	margin-right: -30%;
}

#secondary {
	margin-right: 3%;
}

.masthead-inner {
	position: relative;
}

.mobile-theme .menu-main-container {
	background: none;
}

.mobile-theme #branding {
	background: url('http://wildforestgym.files.wordpress.com/2014/03/header_21-4.jpg') no-repeat scroll top left transparent;
	height: 177px;
}

.mobile-theme #branding {
	background: url('//wildforestgym.files.wordpress.com/2014/09/header_21-4_mobile3.jpg') no-repeat scroll top left transparent;
	height: 110px;
}

.mobile-theme header img {
	display: none;
}

.mobile-theme .main-navigation {
	position: initial;
}

.mobile-theme #access ul.nav-menu {
	background: #000;
}


    [moved to CSS Customization forum and added code tags around CSS above – moderator]

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    I would recommend using this method to work out what selector to target and where the extra left margin on the inner content container is coming from:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    I made a short screencast for you showing how to do it on your site:

    https://cloudup.com/caCo0AavsAP (56s)

  • Unknown's avatar
    biomike1 · Member ·

    Wow. Thanks for that effort.

    I can’t find the same body class on my page that you found?

    <body class=”page page-id-7927 page-template page-template-full-width-page page-template-full-width-page-php logged-in admin-bar custom-background mp6 typekit-enabled customizer-styles-applied group-blog custom-background-image-empty highlander-enabled highlander-light custom-colors customize-support”>

    Therefore I can’t see where I modify the margins?

  • Unknown's avatar
    biomike1 · Member ·

    I think I have found it!

  • Unknown's avatar
    biomike1 · Member ·

    I have moved main content. However the share icons below are misaligned to the left. I tried to move them using the same principles of what you showed me but no such luck.

    Tried to change margin for <div id=”jp-post-flair” class=”sharedaddy sd-like-enabled sd-sharing-enabled”> but it only increased the line gap.

  • Unknown's avatar
    biomike1 · Member ·

    I have also noted that the paragraphs of text don’t have margin so go right out to the border.

    Thanking you in anticipation.

  • Unknown's avatar
    designsimply · Member ·

    Try adding this to the CSS example from the video:

    padding: 0 50px;

  • Unknown's avatar
    biomike1 · Member ·

    It is working really well. Thanks for the tutorial. Most members just send you the code, which is always appreciated. Whereas you have taught me something :-)

    Just one last thing I noticed the 1st image on my new ‘full width’ home page is 850px. However it is not showing it to its full size.

  • Unknown's avatar
    designsimply · Member ·

    Try removing and re-inserting the image with the full width option. If it’s still small, then the original image size may be too small itself.

  • Unknown's avatar
    biomike1 · Member ·

    I have already tried that. I also tried it with an image of 1000px. Still didn’t make any difference….ummm

  • Unknown's avatar
    designsimply · Member ·

    Is this the image?
    https://wildforestgym.files.wordpress.com/2015/02/dsc_5170_850x400_reinventing_2-1.jpg

    It looks like the image itself is only 850px wide. You can’t stretch an image to wider than it’s original dimensions. You could try forcing it, but it’s not a good idea because it stretching an image causes it to look pixelated and lower quality.

  • Unknown's avatar
    biomike1 · Member ·

    That’s right it is 850px wide but it is not showing at that size. It is showing at 644px.

  • Unknown's avatar
    designsimply · Member ·

    Try changing the “Media Width” setting in Appearance > Customize > CSS (the setting is just below the editor in the CSS panel) to 850.

  • The topic ‘Sundance help with CSS code to centralize content for full width page’ is closed to new replies.