Full-width Image Posts with CSS

  • speaksbeliefs · Member ·

    Is there any way to use CSS to alter my current theme, Singl, to treat my posts like my last theme, Modularity Lite. I like the style of Singl, but my posts are all formatted for Modularity (large image posts – responsive to screen size w/o shrinking my images). Singl distorts my images and makes them look blurry. Is this possible? I feel like I waste $30 and I don’t understand CSS at all.

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

  • thesacredpath · Member ·

    Hi there, I’ve looked at a good number of your images, and the do not appear blurry to me. On the image “Lifeless laid to rest…” that image was originally inserted at 640px in width, and it is the same width in Singl. Singl has a maximum content width of 720px, so the available space is wider than that image.

    We can increase the size of the posts so that wider images can be inserted into your posts and pages, but by design, responsive width themes adjust image size so that they fit into the space available on whatever device they are being viewed on, from a large desktop monitor all the way down to a phone. Modularity Lite is a fixed width theme and when that theme is viewed on a phone (without the mobile theme active (Appearance > Mobile) then the whole site is shrunk down so that people have to zoom in to be able to read things.

    With normal images with normal typed-in text, responsive width themes work well, but when all of your writing is within images, it becomes a problem. The same problem exists on a fixed width theme for images such as yours as well since people can only zoom in so far to be able to see the entire width of one of your images.

    It’s sort of a conundrum: You can’t have full-width images (desktop size) and then also have them that same size on a phone that is 1/3 to 1/2 the width.

    I’m not entirely sure there is a solution.

    Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

    .page-header, .page-content, .hentry {
	padding-left: 0;
	padding-right: 0;
}

    In the Content Width box below the CSS edit area, enter 720px and all of your images will be automatically recreated at a maximum of 720px in width.

  • speaksbeliefs · Member ·

    Thanks for your help! Ok. Now I’m happy with my theme, (changed it to Tonal and used your CSS code), but was wondering if there is any CSS cod that will allow me to add social media connection buttons like Singl does (i.e. Twitter and Instagram buttons that link to my accounts) at the very top of my blog? Or my menu positioned when I used Modularity Lite (positioned under my logo header -always visible)?

  • thesacredpath · Member ·

    Given the widgets are in the top area with the navigation, moving the navigation out of that element is not really possible and keep the widget area functioning. That means you would have to go without any widgets of any sort. The following you can try and see what you think. It limits this change to 640px and wider screens/window widths as that is when things kind of go awry. At screen widths less that 640px, it reverts back to the original design and the widgets come back at that point

    @media screen and (min-width: 640px) {
    #menu-block .main-navigation {
    background-color: #888888;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 9999;
    top: 30px;
}
#menu-block {
    display: block !important;
    background: rgba(0, 0, 0, 0);
}
.main-navigation ul {
    display: inline-flex;
}
.main-navigation ul li {
    padding-left: 20px;
}
.widget-areas, #menu-nav {
    display: none;
}
}
  • speaksbeliefs · Member ·

    Thank you! Awesome help! Last 2 questions. Promise. How can I remove the extra whitespace around my header (& between post titles and content) ? What code (if any) can I use to add a footer w/ text “© Speaks Beliefs, 2009-2014. All rights reserved.” ?

  • thesacredpath · Member ·

    These should give you enough to tighten all the things up.

    /*header*/
#masthead {
    padding-top: 120px;
    padding-bottom: 120px;
}

/*post and page-title*/
.fullwidth-block {
    padding-bottom: 40px;
    padding-top: 20px;
}
/*content top and bottom*/
.hentry {
padding-top: 40px;
padding-bottom: 40px;
}

    For the copyright, add the following and you can edit the declarations I’ve included as desired. You can also edit the content text string as well.

    .site-info:before {
    content: "© Speaks Beliefs, 2009-2014. All rights reserved.";
    display: block;
    margin-bottom: 10px;
    color: #000000;
    font-weight: bold;
    font-size: 110%;
}
  • speaksbeliefs · Member ·

    Thanks again.

  • thesacredpath · Member ·

    You are welcome.

  • The topic ‘Full-width Image Posts with CSS’ is closed to new replies.