Full Width Photos for all Screen Resolutions

  • Resolved gdaytaiwan

    (@gdaytaiwan)


    7 years, 8 months ago

    Hi there

    Would anyone be kind enough to give me the code to have all photos and graphics to take up the full-width of any screen. I’m after something like this: https://www.pinkbike.com/news/we-went-to-taiwan-and-started-a-bike-company.html

    If I go full-width, I assume that the height of the pictures would also increase? I would like all photos to remain proportionate, no matter what screen size. Please note I want Videos and Maps to remain the same size, though.

    My website is gdaytaiwan.com

    Many thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi, where exactly are you wanting to do this on your site? On static pages, such as your about page, we can make the image larger than it is, but there will be a bit of white space on the left and right since the image and the text content is within the same div.If we were to widen that parent div, your text content would be directly against the left and right sides of the window/screen. What we can do is to reduce the left/right padding on the parent div (.site) so that it is the same on all screen sizes. Add the following to your custom CSS and see what you think.

    img {
  width: 100%;
}
@media screen and (min-width: 75em) {
  .site {
    padding-left: 27px;
    padding-right: 27px;
  }
}

    On single post pages in Sketch, you would have to hide the right sidebar, which you have widgets in in order to take the content and images full width.

    I might suggest looking at some different themes that have full-width featured images. To make Sketch into the site you referenced, would take quite a bit of redesign on the theme, including editing of the theme php script files.

    Thread Starter gdaytaiwan

    (@gdaytaiwan)

    Hi sacredpath

    Thanks for your reply. I am looking to change the images on single post pages as you’ve mentioned. I have tried looking at other themes, but feel strongly attached to sketch which is why I’m looking to customise!

    I’ve edited php script files a few times, but in no way would I say I’m a pro. However I would like to try, so do you mind helping me out on this? or do you think it is still too difficult?

    Thread Starter gdaytaiwan

    (@gdaytaiwan)

    Also sorry to bother you, if I could make the jetpack gallery also full width that would be great too.

    ! tried the code you gave me earlier. it works great for single shots but not for any photos in my gallery. As mentioned I would only like images on single posts to be like this. Thank you!

    Thread Starter gdaytaiwan

    (@gdaytaiwan)

    I’ll try posting again since I’ve been waiting for an answer for awhile – sorry. Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Full Width Photos for all Screen Resolutions’ is closed to new replies.