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 fixed to center

Image fixed to center

Scheduled Pinned Locked Moved General Discussion
fixedcenter
4 Posts 2 Posters 339 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.
  • M Offline
    M Offline
    mrl_money
    wrote on Apr 26, 2021, 9:30 AM last edited by
    #1

    So I'm having a hard time figuring out how an element (text/image/caroussel/whatever) can be fixed to the center of the page.

    Is there a way to fix an element to the center? So which ever way you drag the browser it will remain in the middle.

    Been playing around with Frame tool. But that will only allow me to set a fixed height that pushes the image to the center-ish. Setting the bottom % works counter intuitively - it adds more space.

    Cheers!

    1 Reply Last reply
    0
    • R Offline
      R Offline
      Richard
      Global Moderator
      wrote on Apr 26, 2021, 10:55 PM last edited by Richard Apr 26, 2021, 6:56 PM
      #2

      Dear @mrl_money

      "Is there a way to fix an element to the center? So which ever way you drag the browser it will remain in the middle."

      Using CSS to achieve a 'fixed ' element is likely the best choice, unsure of your design needs.

      An element can be targeted with CSS by attributes that it may have, most commonly a Class or ID .


      Example HTML:

      <div class="this-elements-class">
      
            <div id="this-elements-id">
            </div>
      
      </div>
      

      Say we want the outer <div> to have a fixed position, we could target it with CSS and apply some rules to it:

      .this-elements-class{
      position:fixed;
      }
      

      Or if we wanted to target the nested (inner) <div> :

      #this-elements-id{
      position:fixed;
      }
      

      With CSS we use an ' . ' for Class and a ' # ' for ID.


      https://laytheme.com/documentation.html#custom-css-styling


      Any Custom CSS can be applied to your Laytheme site via:

      Lay Options > Custom CSS & HTML > Custom CSS

      Or:

      Customize > CSS


      Hope this helps you in the right direction @mrl_money & have a wonderful day ๐ŸŒž

      Sincerely
      Richard
      M 1 Reply Last reply Apr 29, 2021, 11:04 AM
      0
      • R Richard
        Apr 26, 2021, 10:55 PM

        Dear @mrl_money

        "Is there a way to fix an element to the center? So which ever way you drag the browser it will remain in the middle."

        Using CSS to achieve a 'fixed' element is likely the best choice, unsure of your design needs.

        An element can be targeted with CSS by attributes that it may have, most commonly a Class or ID.


        Example HTML:

        <div class="this-elements-class">
        
              <div id="this-elements-id">
              </div>
        
        </div>
        

        Say we want the outer <div> to have a fixed position, we could target it with CSS and apply some rules to it:

        .this-elements-class{
        position:fixed;
        }
        

        Or if we wanted to target the nested (inner) <div> :

        #this-elements-id{
        position:fixed;
        }
        

        With CSS we use an ' . ' for Class and a ' # ' for ID.


        https://laytheme.com/documentation.html#custom-css-styling


        Any Custom CSS can be applied to your Laytheme site via:

        Lay Options > Custom CSS & HTML > Custom CSS

        Or:

        Customize > CSS


        Hope this helps you in the right direction @mrl_money & have a wonderful day ๐ŸŒž

        Sincerely
        Richard
        M Offline
        M Offline
        mrl_money
        wrote on Apr 29, 2021, 11:04 AM last edited by
        #3

        @Richard

        Thanks for taking you time! Sadly I'm a complete stranger to CSS. I wouldnยดt know where to begin other than from the bottom. :)

        1 Reply Last reply
        0
        • R Offline
          R Offline
          Richard
          Global Moderator
          wrote on May 3, 2021, 8:07 AM last edited by
          #4

          Dear @mrl_money

          Could you please post a link to your website and i can take a better look ๐ŸŒ

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

          2/4

          Apr 26, 2021, 10:55 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.
          2 out of 4
          • First post
            2/4
            Last post
          0
          • Recent
          • Tags
          • Popular
          • Users
          • Search