Lodestar: how to make the pictures wider

  • Unknown's avatar
    sallakoivu · Member ·

    Hi!

    I’d like all the pictures that are in my portfolio-pages to be wider.

    Eg. in this page, I’d like every single picture to be a lot wider:
    https://sallakoivu.com/portfolio/sushifck-website/

    It doesn’t seem to do anything, if I change the “media width” in customize. :((

    If possible I’d also like to remove the “featured picture” which is on top of the portfoliopage above the title.

    I don’t really understand coding, so I would be so so so greatful of help!!!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, first off I’d like to mention that in addition to the images getting wider, so would the text, and with text, you typically want to keep it between 500 and 750 pixels in width or readability suffers and the eye have a harder time moving from the end of one line to the beginning of the next. Currently the content area has a maximum width of around 700px, so the text is within that range.

    The Media Width field sets the width of the images within the parent content div. It cannot be wider that that div, so we have to widen the content area first and then set the Media Width so that the images will take up the entire area of that content div.

    The following will remove the featured image at the top of your portfolio project pages. 

    .single-jetpack-portfolio .custom-header-image {
  display: none;
}
.single-jetpack-portfolio .site-content {
  margin-top: 88px;
}

    For the width of images, first off put 1200 into the Media Width field, and then add the following to your custom CSS and see what you think. 

    .single-jetpack-portfolio #primary {
  max-width: 100% !important;
  width: 100% !important;
}

    This does not take the content/images full width of the browser window, but widens them considerably. Let me know what you think with the above.

  • Unknown's avatar
    sallakoivu · Member ·

    Yess! It works perfectly. Thanks!! The text is not as readable, you’re right, but since this is a portfolio, big impressive pictures are more important. ;) Now I just have to make all my pictures wide enough for this new look..

    Umm, just one more thing! Now that I removed the header picture, the navigation/menu “panel” on top of the page disappears, when you scroll down a single post page, and then all the way up again.

    For example, this page: https://sallakoivu.com/portfolio/sushifck-website/
    Try scrolling down a bit, and then up again.

    If you have any easy fixes for that as well, that would be superb!

  • Unknown's avatar
    thesacredpath · Member ·

    Hmmm, this is weird. This isn’t perfect, but give this a try. When you scroll down the menu temporarily disappears. That I believe is controlled with Javascript and I can’t find a way to override it with CSS. See what you think with this. 

    @media screen and (min-width: 60em) {
  .logged-in.single-jetpack-portfolio .site-header-hidden.header-top {
    -webkit-animation: header-up 0 ease-in;
    animation: header-up 0 ease-in;
    -webkit-transform: translate(0);
    transform: translate(0);
    top: 32px;
  }
  .single-jetpack-portfolio .site-header-hidden.header-top {
    -webkit-animation: header-up 0 ease-in;
    animation: header-up 0 ease-in;
    -webkit-transform: translate(0);
    transform: translate(0);
    top: 0;
  }
}
  • Unknown's avatar
    sallakoivu · Member ·

    Yeah, it seems to work pretty well. Thanks a lot :)

  • Unknown's avatar
    thesacredpath · Member ·

    Hooray and you are welcome!

  • The topic ‘Lodestar: how to make the pictures wider’ is closed to new replies.