expand the max width

  • Author
    Posts
  • #1697345

    jessewheaton
    Member

    I want to expand the max width of the entire blog, the problem is I don’t know wordpress’ term for the navbar and header image. As you can see below I’ve tried these terms without it working. It seems that the content, header image, and nav bar are all limited to 1255 px, I assume by a media query, and I need to change that so that as you expand the browswers width, it doesn’t stop at some point.

    http://electroniccurrent.com/

    .header-image {
    max-width: 2000px;
    }

    .navbar {
    max-width: 2000px;
    }

    .navbar {
    max-width: 2000px;
    }

    .navbar-inner {
    max-width: 2000px;
    }

    #nav {
    max-width: 2000px;
    }

    .main-menu {
    max-width: 2000px;
    }

    The blog I need help with is electroniccurrent.com.

    #1697428

    Hi, add this to extend the menu to 2000px max width:

    .site-header {
        max-width: 2000px;
    }

    On the header image, Twenty Fourteen has a flexible width header. Create a new header at least 2000px in width and then when you go to insert it, select “use as is” and don’t crop the image (Appearance > Header).

    #1697471

    jessewheaton
    Member

    Thanks. I can’t seem to find the use as is setting in (Appearance > Header).

    Also the content seems to be restricted. When I expand the browser on the home page, the columns of posts should increase to three, but it is somehow restricted.

    #1697473

    jessewheaton
    Member

    See here in a wide browser to see the content width restrictions (event though i changed the .content max-width)
    http://electroniccurrent.com/2014/03/13/bryzone-releases-new-melodic-dnb-tracks-trial-run-stargaze/

    #1697478

    Add the following and you will have up to 5 rows on the main page.

    .site-content {
        margin-right: 18.0476%;
    }
    .hentry {
        max-width: 100%;
    }

    On the header, when you go to Appearance > Header in the dashboard (in the left navigation), you can upload your header and when you go to insert it, it should present you with the choice of cropping the header or using it as is and not cropping it.

    #1697497

    jessewheaton
    Member

    ok that worked. I’m only getting a crop and publish option with the header image- any help on that?

    Also, I would like to redirect my blogger posts directly to their new location on wordpress- can you help me with that? I found this http://wordpress.org/plugins/blogger-to-wordpress-redirection/ but i don’t think it willl work on .com as I’m hosted through wordpress

    #1697540

    No, the plugin won’t work here as users cannot install plugins on WordPress.com. That plugin is for self-hosted WordPress.org sites. I know of no way to do a redirects on individual URLs from another host.

    On the header image, let’s do this all in the CSS. Upload your new image to the Media Library (Media > Add New), get the URL of that uploaded image and then add the following CSS and replace URL_OF_IMAGE between the quote marks with the URL of your image. If you image is taller or shorter than 70px, change the “min-height” value to match it.

    #site-header {
        background: url("URL_OF_IMAGE") no-repeat scroll 0 0 #000000;
        background-size: contain;
        min-height: 70px;
        width: 100%;
    }
    #site-header img {
        visibility: hidden;
    }
    #site-header a {
        display: block;
    }
    #1697542

    jessewheaton
    Member

    ok i uploaded a 3000px image and its still limited

    #1697562

    First, the way you’ve gone about expanding the max width to 2000px will break a responsive layout, so I would recommend applying changes to width like that one just to large screens by using a media query.

    For example, if you wanted to apply all the CSS you’ve added so far to a media query that only kicked in for screens larger than 1260px, you would add something like this:

    @media screen and (min-width: 1040px) {
    	/* put your css here */
    }

    Now, for the header image, it sounds like you want it to expand it outside the 2000px max-width area. Is that right? To do that, you need to add the image as a background on an element behind the one that is 2000px wide and then move that one down to give the background image space to show through.

    Here is an example that will add your header image as a background on the main body and move the main content container down to let it show up. The media query works to limit the change only to large screens (because this change isn’t needed for smaller screens). I picked 100px as the height arbitrarily, but you can change it to something else if you’ce like (note that “100” appears twice).

    @media screen and (min-width: 1040px) {
    	#site-header {
    		display: none;
    	}
    
    	body.custom-background {
    		background: url('http://electroniccurrentdotcom.files.wordpress.com/2014/03/tec-website-header_84.jpg?h=100') repeat-x;
    	}
    
    	#page {
    		margin-top: 100px;
    	}
    }

    Try it out and also try editing the “100” to see if this does what you’re looking for. If it doesn’t, then I may have misunderstood the request!

    #1697563

    Also, I would like to redirect my blogger posts directly to their new location on wordpress- can you help me with that? I found this http://wordpress.org/plugins/blogger-to-wordpress-redirection/ but i don’t think it willl work on .com as I’m hosted through wordpress

    I’m so sorry but that plugin is not available here at WordPress.com. You are using WordPress, but you are not using a self-hosted, self-hosted and maintained WordPress.org setup. Installing custom plugins is not permitted at WordPress.com, but it is if you are using a WordPress.org setup.

    WordPress.org and WordPress.com are separate: http://en.support.wordpress.com/com-vs-org/

    #1697567

    jessewheaton
    Member

    The problem with a having a background image as the site header is it doesn’t change width, so it crops off the right side- any way to fix that?

    The navigation bar dropdown for weekly posts cuts off- is there a way to let the dropdown menu scroll?

    #1697568

    jessewheaton
    Member

    Also with the new media queries the display posts shortcode i used in the left sidebar under authors is now showing columns- can i change that just for that sidebar (#secondary)

    #1697635

    The problem with a having a background image as the site header is it doesn’t change width, so it crops off the right side- any way to fix that?

    The background-size property was made to try to help that situation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    However, a more ideal approach would be to use a background image that looks good repeated and text for the site title and tagline and then style the text elements using CSS.

    #1697636

    The navigation bar dropdown for weekly posts cuts off- is there a way to let the dropdown menu scroll?

    Someone has asked about that before. Try this solution:
    https://en.forums.wordpress.com/topic/drop-down-menus-display-different-number-of-options-on-different-browsers?replies=6#post-1666326

    #1697637

    Also with the new media queries the display posts shortcode i used in the left sidebar under authors is now showing columns- can i change that just for that sidebar (#secondary)

    Sorry, I don’t follow! I looked under “Authors” on the left sidebar on my Mac and I only see one column of posts there. Can you give me more detail on how to find this or screenshot it for me?
    http://en.support.wordpress.com/make-a-screenshot/

    #1697639

    jessewheaton
    Member

    I’m already using the background size property- the problem is it stops working after a certain point.

    Fixed nav bar.

    I can’t upload images here but if you look on the left side of the homepage there’s a series of author photos, and below each is 3 articles. Those articles are displayed in columns instead on a running ul

    #1697640

    jessewheaton
    Member

    also is there anyway to display tags as a word on top of a specific color? see this: http://metrojolt.com/

    #1697641

    I’m already using the background size property- the problem is it stops working after a certain point.

    It seems to be working for me, but maybe I’m not seeing the same thing as you. At what point does it stop working? What happens? Does it disappear?

    Fixed nav bar.

    Great!

    I can’t upload images here

    The support page I sent covers that, it suggests uploading the screenshot to your media library.
    http://en.support.wordpress.com/make-a-screenshot/#sharing-your-screenshot

    if you look on the left side of the homepage there’s a series of author photos, and below each is 3 articles

    Now I see it. I was looking at each post “block” as one column and looked straight past the list items underneath each image before. It helps in cases like this to describe specifics, i.e. I want the text like “Lightning In A Bottleā€™s Updated Lineup and Video are Here!” to be full width.

    That’s happening because you are applying CSS for “.display-posts-listing li” to all display post listings regardless of where they are. The “max-width:29.33%;” part of those rules are causing the three columns you’re seeing for the text under posts in the left sidebar.

    What you probably wanted instead was to only apply the columns stuff only to the main content area. You can do that by adding “#content” to the beginning of each selector.

    Look through your custom CSS and find each instance of

    .display-posts-listing li

    and for each one that you want to limit to the main content area, change it to

    #content .display-posts-listing li

    or if you want to limit the rule to the sidebar instead, then change it to

    #sidebar .display-posts-listing li

    also is there anyway to display tags as a word on top of a specific color? see this: http://metrojolt.com/

    You can, but you would need to add a CSS rule for every tag separately.

    First, add one set of rules to hide commas in tag lists and add extra line height:

    .cat-links {
    	color: #f5f5f5; /* hack to hide commas in post tag lists */
    }
    
    .entry-meta {
    	line-height: 2; /* give the tags some space */
    }

    Then for each tag, add a CSS rule like this:

    .cat-links a[title="View all posts in CHILL/GROOVE"] {
    	color: #fff;
    	background: #e52727;
    	padding: 5px;
    	border-radius: 2px;
    }

    The part inside the “[” and “]” must match the HTML source for the tag link exactly.

    #1697642

    jessewheaton
    Member

    It seems to be working for me, but maybe I’m not seeing the same thing as you. At what point does it stop working? What happens? Does it disappear?

    Once you get quite large it stops expanding and a black background sets in. only effects laptops 15″+


    awesome! I had been trying .content not #content!

    —-
    sweet!

    could you answer my other qs?
    https://en.forums.wordpress.com/profile/jessewheaton

    #1697643

    jessewheaton
    Member

    It seems to be working for me, but maybe I’m not seeing the same thing as you. At what point does it stop working? What happens? Does it disappear?

    Once you get quite large it stops expanding and a black background sets in. only effects laptops 15″+


    awesome! I had been trying .content not #content!

    —-
    sweet!

    could you answer my other qs?
    https://en.forums.wordpress.com/profile/jessewheaton

The topic ‘expand the max width’ is closed to new replies.