Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Image Resizing Affecting Image Resolution

Image Resizing Affecting Image Resolution

Scheduled Pinned Locked Moved General Discussion
9 Posts 3 Posters 2.1k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    C Offline
    comedowntous
    wrote on last edited by comedowntous
    #1

    Hello โ€”

    I understand that Lay Theme is built to be compatible with all types of screen sizes and so images resize according to different screen sizes -

    I'm working on a website for a photographer and I would like for the images to become smaller as the screen resolution becomes smaller - but not to increase beyond the original image size.

    The images are becoming distorted as the page widens and the images become stretched.

    Thanks

    1 Reply Last reply
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      Hm that shouldn't happen. Can you give me a link?

      1 Reply Last reply
      0
      • C Offline
        C Offline
        comedowntous
        wrote on last edited by
        #3

        I sent the link + login via chat.

        I went on to do the following, added the following custom css to the desktop version:

        img {
        max-width:850px;
        }

        This css rule ensures that images do not exceed the width of 850px, however portrait images with a different orientation appear to be larger, they continue to increase in width and appear to float outside of the parent element. In my 2 column grid I have single portrait images, landscape oriented images and portrait images side by side, the portrait images which are placed side by side appear to float outside of the parent element.

        Also, the larger the resolution the more off center the images appear to be.

        I tried adding a specific class to portrait-oriented images in the gridder and then to create a css rule for that class - but this method did not seem to work.

        How would I be able to center the page as it appeared originally? And is it possible to add specific classes to specific images within the gridder ?

        1 Reply Last reply
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by arminunruh
          #4

          Hey!
          You probably don't want your images to become too big on a big screen right?
          You can try:

          #main-region{
              max-width: 1280px;
              margin-left: auto;
              margin-right: auto;
          }
          

          The problem with your approach is that the images might not become larger than 850px, but the grid's size is still in % that's why the images get placed weirdly.

          1 Reply Last reply
          0
          • N Offline
            N Offline
            nyktophobie
            wrote on last edited by nyktophobie
            #5

            hey,
            first of all. thank you for making this. its such a great tool!

            now my question to add on this thread.
            how can i set a max width for the whole page including menu and title?
            the code above only influents the body-content.

            i think there should be a way to limitate the total width, cause on 27" screen for example, you have to use huge images that cost a lot of time to load if they should not be pixelated.

            thanks!

            C arminunruhA 2 Replies Last reply
            0
            • N nyktophobie

              hey,
              first of all. thank you for making this. its such a great tool!

              now my question to add on this thread.
              how can i set a max width for the whole page including menu and title?
              the code above only influents the body-content.

              i think there should be a way to limitate the total width, cause on 27" screen for example, you have to use huge images that cost a lot of time to load if they should not be pixelated.

              thanks!

              C Offline
              C Offline
              comedowntous
              wrote on last edited by
              #6

              Great - Thanks! I tested this on different screen resolutions and it works great!

              Nyktophobie - I believe that #main-region is the div where all page elements sit; site title, menu and content and so I believe you would be able to use this to set max-width for the entire page. Armin - am I correct? Let's play by ear..

              If you would like to test how your page would appear on different screen sizes you can use this online tool [http://quirktools.com/screenfly/] the largest preset size is 24" so you would have to manually enter the dimensions for 27" screen.

              I was also concerned about the loading speed of the website - any tips on how to optimize speed?

              Thanks again!

              1 Reply Last reply
              0
              • arminunruhA Offline
                arminunruhA Offline
                arminunruh
                Global Moderator
                wrote on last edited by
                #7

                @comedowntous said:

                I was also concerned about the loading speed of the website - any tips on how to optimize speed?

                Not sure how to speed up the website more. You can try to use the wp super cache plugin, maybe that helps?

                1 Reply Last reply
                0
                • N nyktophobie

                  hey,
                  first of all. thank you for making this. its such a great tool!

                  now my question to add on this thread.
                  how can i set a max width for the whole page including menu and title?
                  the code above only influents the body-content.

                  i think there should be a way to limitate the total width, cause on 27" screen for example, you have to use huge images that cost a lot of time to load if they should not be pixelated.

                  thanks!

                  arminunruhA Offline
                  arminunruhA Offline
                  arminunruh
                  Global Moderator
                  wrote on last edited by
                  #8

                  @nyktophobie said:

                  now my question to add on this thread.
                  how can i set a max width for the whole page including menu and title?
                  the code above only influents the body-content.

                  i think there should be a way to limitate the total width, cause on 27" screen for example, you have to use huge images that cost a lot of time to load if they should not be pixelated.

                  Cool, i'm glad that you like lay theme!
                  Theres no way to set the max width for the menu and title :(
                  The total width of the page content is limited with the css i posted above.

                  1 Reply Last reply
                  0
                  • N Offline
                    N Offline
                    nyktophobie
                    wrote on last edited by
                    #9

                    thank you anyway. iยดll find a solution :)

                    1 Reply Last reply
                    0
                    Reply
                    • Reply as topic
                    Log in to reply
                    • Oldest to Newest
                    • Newest to Oldest
                    • Most Votes


                    I also code custom websites or custom Lay features.
                    ๐Ÿ’ฟ Email me here: ๐Ÿ’ฟ
                    info@laytheme.com

                    Before you post:
                    1. When using a WordPress Cache plugin, disable it or clear your cache.
                    2. Update Lay Theme and all Lay Theme Addons
                    3. Disable all Plugins
                    4. Go to Lay Options โ†’ Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                    This often solves issues you might run into

                    When you post:
                    1. Post a link to where the problem is
                    2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                    3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                    Online Users
                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                    laytheme.com
                    • Login

                    • Don't have an account? Register

                    • Login or register to search.
                    • First post
                      Last post
                    0
                    • Recent
                    • Tags
                    • Popular
                    • Users
                    • Search