How to adjust the index page structure

Home Forums WordPress Theme Support BresponZive Mag How to adjust the index page structure

This topic contains 1 reply, has 2 voices, and was last updated by  Randy 9 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #3395

    Vincent
    Member

    Hello,

    I want to resize the thumbnail picture of the post. So I changed the size from to 340X160 to 200X140.

    But after I resized the thumbnail, I found the excerpt of the post size does not change automatically. And there is a space on the right and it’s very ugly.

    So please help me out and how I can resize the thumbnail and excerpt of the post? Thanks.

    #3436

    Randy
    Member

    So I will first re-iterate, that I am a novice user just like you — I am not the official support guy. I am just trying to help out if some questions go unanswered for several days and I happen to have figured out the answer.

    All of these appearance-related questions are resolved by poking around the cascading stylesheet for the theme (style.css). Possibly the reason the theme author is not as responsive to appearance questions is because they are CSS issues, not theme issues, and maybe the expectation is that we know more about stylesheets.

    Step One is to load the stylesheet by going to wp-admin > Appearance > (Theme) Editor and clicking on style.css to load it into a window.

    Step Two – BACK UP THE ORIGINAL BEFORE MAKING ANY CHANGES. Before I do anything, I select-all, copy the entire editing window and paste it into notepad and save it as style.css on my PC.

    Step Three – open your site in your browser and right click directly on the page element you are trying to change. In your case, start with the thumbnail you want to change size. Every browser has some type of “view page source” or “Inspect element” choice you can make by right-clicking. In Chrome, if I chose inspect element after right clicking on the thumbnail, I get the element called <div class=”magbig-thumb”>.

    Step four – now I go back to the editor window and I search (Ctrl-F) the text inside the window for “magbig-thumb” and I find a reference to it in a line that says

    “.magbig-thumb { position: relative;float:left; height:160px;width:320px; }”

    By changing the width to “200px” and clicking “Update File” I can see the changes when I reload the site. But, as you mentioned, now the excerpt block leaves a lot of white space to the right.

    So again, I right-click on that white space and “Inspect Element” and I see that that area is based on “<div class=”list-block clearfix”>. The clearfix does something — I don’t know what. When I search for “list-block” in the style.css window, I find this line

    “.list-block {position: relative;width:49%;float:left;”

    I experimented with some % values and decided on 75% so I made the change and clicked Update File and I’m done!

Viewing 2 posts - 1 through 2 (of 2 total)

Only Verified Customer of this Theme Can post reply to this Support Topic! .