align same high site info

• 

  moshekahol · Member · Oct 14, 2016 at 2:40 pm

  • Copy link
  • Add topic to favorites

  Hi in my site: kahol.co.il
  I got 3 elemnts on the bottom of the site info:
  1. wordpress logo/text on the left
  2. site info copyrights in the middle
  3. a text widget with an Israel flag icon

  I want to align them to the same high in all devices…
  I got a mess on mobile, and tried playing with the numbers with no real solution…

  how can I align all those 3 elemnts in all devices?

  thanks alot!!!

  The blog I need help with is: (visible only to logged in users)

• 

  siobhyb · Member · Oct 14, 2016 at 5:49 pm

  • Copy link

  Hi @moshekahol,

  As I touched on earlier, the CSS you’re requesting here is advanced and goes beyond the scope of support that this forum is intended for.

  If you require larger and multiple changes to your theme’s layout, especially if those changes are specific to mobile and require lots of testing, please consider hiring a professional to help you.

  You can make use of CSS Media Queries to target devices of different devices. We have a good introduction to Media Queries, as well as some examples of them in use, here:

  https://en.support.wordpress.com/custom-design/custom-css-media-queries/

  As a possible solution for your needs, you could use the following Media Query to stack the credit for WordPress.com and the copyright information on top of each for devices that are 896px in width or smaller:

  @media screen and (max-width: 896px)  {
      .site-info:after {
          margin-top: 0;
          left: 0;
          text-align: right;
      }
  
      .site-info {
          text-align: right;
      }
  }

  You can the use CSS, such as the following to target the widget containing the flag (#text-34.widget) and adjust its positioning from the bottom:

  @media screen and (max-width: 896px) {
      #text-34.widget {
          bottom: -30%;
      }
  }

  Have an experiment with the above. If you’re trying to achieve a different layout for those three items, then you can use Media Queries as a starting point.