Lay Theme Forum

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

    Display Digital work

    General Discussion
    2
    4
    353
    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.
    • A
      adam last edited by

      Hey guys

      I am trying to set up an easier way of displaying digital work although i am not sure its as easier as I thought with lay theme.

      Ideally, I would like to create a few classes I can apply to specific images and display them with a solid colored background. I was going to do a browser, tablet and mobile. A great example of what I am trying to achieve is something like Area 17. https://area17.com/work/the-new-school-website

      I understand its a little bit of additional css to get it working just not sure its possible with how the gridder is built, as I seem to run into alignment issues.

      Any help would be much appreciated!

      Thanks

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

        Hi @adam
        you can do this for example by giving each image a background color and a padding.
        Add this to your custom CSS section.

        .grid img {
            padding: 20%;
            background: lightgrey;
        }
        
        

        It is always good to know the basics of CSS. At Codeacademy you can make a free beginner course.

        I hope that helps!

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • A
          adam last edited by

          @mariusjopen said in Display Digital work:

          padding: 20%;
          background: lightgrey;

          Hi Marius

          Thanks for the reply. What if I don't want this to happen to all my images just a select few.

          Also when I did add that code you suggested it pushed my images to be larger then the layout and off the page?

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

            HI @adam
            by right clicking on an image you can give it a class. Then you can apply the CSS only to that class.

            Yes. Of course. The image with get bigger because of the "frame".

            You need to work with that – or you make the frame as a part of the image.

            The solution I proposed is more a workaround – because this is not a very common thing to do.

            Best!

            Marius

            www.mariusjopen.world

            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

            C

            Recent Topics

            • C

              image carousel bugging out

            • N

              help needed with cleaning up and optimising lay theme portfolio website

            • R

              Html5 Video Player issue

            laytheme.com