Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    How to disable resizing of elements

    General Discussion
    2
    7
    565
    Loading More Posts
    • 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.
    • L
      llll last edited by

      Hello,

      I am looking for a way to display images, GIFs and videos pixel-exact in original size and so that the image is cropped when the screen is smaller than the width of the image.

      Adding a html class to the image, like you kindly suggested earlier in the example below, prevents resizing to more than 600 px. But the 600 px image will still resize to a smaller width.

      .col.fixed-width{
      width: 600px!important;
      }

      Could you please let me know how to disable resizing in both directions?

      I will only ever need widths of 512 px, 1024 px, ...

      Thank you very much

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Hi @llll
        a bit difficult to help when I do not see a website to check the code.

        But try to address the image directly:

        .col.fixed-width img{
        width: 600px !important;
        }
        

        I hope that helps!

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • L
          llll last edited by

          Hi Marius,

          thanks.
          I might well have screwed up somewhere, so please have a look.
          Here is an example for testing:

          https://lidiasigle.de/fixed_width_test

          600 px width images and applying this:

          .col.fixed-width{
          width: 600px!important;
          }

          I tested your suggestion and unfortunately it did not solve the issue: still downsizing the image in a narrow screen instead of cropping. Your suggestion behaves in the same way as Armin's suggestion above, but it additionally creates a white frame at the right and the bottom, which will grow bigger when increasing the screen size. Both suggestions cause issues like displaying parts of the first row below the second row and I had a double image displayed when there is only one row. There are issues with parallax and row gutters, too.

          I need widths of 512 px and 1024 px. Can I do it like this?

          .col.fixed-width{
          width: 1024px!important;
          }

          And how can I use both 512 px and 1024 px? I could make a 1024 px file for 512 px with the other half filled with background color. There is probably a more elegant way?

          Disabling resizing might be not a common requirement but is very important for me. Hope you know a way to achieve it.

          Thank you very much for your help

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Hi @llll

            ok, maybe my mistake. I got you wrong:

            Try this:

            .col img, .col .img {
                width: 60vw !important;
            }
            

            You can change the 60 to another number.
            Now the image always resizes with the browser-width.

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • L
              llll last edited by

              Hi Marius,

              thanks, but that’s the opposite. I do not want the image to resize with browser width. I want the image to never resize. I need a way to display the image always pixel-exact and never interpolated. Instead of downsizing, the image should be displayed cropped, when the browser width is less than 1024 pixels for a 1024 px wide image.
              Armin’s suggestion works only in one direction – the image does not resize with increasing browser width, but the image width decreases when browser width is less than a certain width – and it also causes visual bugs like double images, overlaying of rows etc.

              My questions are:

              How to disable resizing of elements?
              How to set more than one fixed width?

              Please let me know if something is unclear.

              Thank you very much in advance

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Hi @llll

                you can add something like this to your CUSTOM HEAD section:

                <style>
                
                @media screen and (max-width: 1000px) {
                    .resize img {
                        width: 300px !important;
                    }
                }
                		
                @media screen and (max-width: 800px) {
                    .resize img {
                        width: 200px !important;
                    }
                }
                
                @media screen and (max-width: 600px) {
                    .resize img {
                        width: 100px !important;
                    }
                }
                </style>
                
                

                I hope that helps!

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • L
                  llll last edited by

                  Hi Marius,

                  thanks but this is not what I asked for. I do not want the image to resize with browser width. I want the image to always be displayed at 100%. Here is an example:
                  http://pza.sanbi.org/sarcophyte-sanguinea-subsp-sanguinea

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post

                  Before you post

                  Use the Search Feature. Maybe there is already a solution to your issue.

                  1. Update Lay Theme and all Lay Theme Addons
                  2. Disable all Plugins
                  3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                  4. Now see if your problem solved itself
                  5. Go here, see if your problem is listed here:
                  Troubleshooting

                  When you post:
                  1. Post a link to where the problem is
                  2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                  Thanks!

                  Online Users

                  S

                  Recent Topics

                  • T

                    OpenType Feature

                  • T

                    Split Screen just on front page / subpages without the split?

                  • T

                    problem when I click on the category filter buttons on mobile

                  • G

                    z index has different behaviors on different pages

                  laytheme.com