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. Need Custom Coding for Lay Theme? Find 3rd Party Developers here.
  3. How do i make Images inserted via Shortcode responsive?

How do i make Images inserted via Shortcode responsive?

Scheduled Pinned Locked Moved Need Custom Coding for Lay Theme? Find 3rd Party Developers here.
5 Posts 2 Posters 179 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.
  • A Offline
    A Offline
    alexandre
    wrote on Apr 20, 2024, 5:34 PM last edited by alexandre Apr 20, 2024, 1:49 PM
    #1

    Here's some context:

    • I'm running Lay Theme version: 7.0.9 and Wordpress 6.5.2
    • I'm using the Plugin Advanced Ads to insert image ads via shortcode.
    • Image dimensions can be set inside Advanced Ads but only in pixels, this means they are not responsive and stay the same dimensions when resizing the browser window
    • I can set the container class and id of each image via the plugin

    Is there a way to insert images via shortcode and make them responsive, no matter the actual image dimensions? It used to work a couple of updates ago.

    Bildschirmfoto 2024-04-20 um 19.30.35.jpg

    If I insert the shortcode into the gridder (like above), I want the image to have the same width as set in the gridder, and for it to be responsive (like below). Is that possible?

    Bildschirmfoto 2024-04-20 um 19.40.34.jpg

    Unfortunately it looks like this when I enter the shortcode (see below). No matter the size I set in the gridder, the image is shown in its original dimensions and stays unresponsive.

    Bildschirmfoto 2024-04-20 um 19.39.44.jpg

    I have only minimal knowledge about HTML/CSS or class / id, and such. Any help is much appreciated!

    1 Reply Last reply
    0
    • A Offline
      A Offline
      arminunruh
      Global Moderator
      wrote on Apr 23, 2024, 4:05 PM last edited by
      #2

      i need the link

      1 Reply Last reply
      0
      • A Offline
        A Offline
        arminunruh
        Global Moderator
        wrote on Apr 23, 2024, 4:05 PM last edited by arminunruh Apr 23, 2024, 12:06 PM
        #3

        its just an image?

        .type-shortcode img{
        width: 100%important;
        }
        

        maybe this?

        1 Reply Last reply
        0
        • A Offline
          A Offline
          alexandre
          wrote on Apr 25, 2024, 4:40 PM last edited by alexandre Apr 25, 2024, 12:41 PM
          #4

          Well, it seemed very complicated on the surface 😅

          Thanks so much! It works fine and is exactly what I was looking for.

          1 Reply Last reply
          0
          • A Offline
            A Offline
            arminunruh
            Global Moderator
            wrote on May 1, 2024, 9:03 PM last edited by
            #5

            nice!

            i had to change this before because some people had the exact opposite problem.
            ^^

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

            3/5

            Apr 23, 2024, 4:05 PM


            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.
            3 out of 5
            • First post
              3/5
              Last post
            0
            • Recent
            • Tags
            • Popular
            • Users
            • Search