Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #961304

    I’m trying to add 6 different images that should be aligned center of the socket area.
    I started by adding the image urls in the Enfold -> Footer -> Copyright

    The default result was not pretty so I have been going through various threads on this forum trying to find some css code to use.
    I’m starting to get somewhere but currently the images are not perfectly centered, and does not work in responsive/mobile

    Here is the code I have been using to try and getting the images centered.

    First I used an img class:

    img.img-socket {
    display: inline;
    margin-left: 2%;
    max-height: 25px;
    }

    Then combined with the css code below it is almost working, but I cant get it perfectly centered. And as I mentioned it does not look good in responsive/mobile:

    span.copyright { width: 100%; }
    #socket .av-share-box { line-height: 0px;  width: 20%; float: right; top: -30px; position: relative;
    }
    #socket center {
        top: -25px;
        position: relative;
        z-index: -1;
    }

    Provided URL in private content

    #961334

    Hey belinger,
    I recommend removing your center tag, as it is not use anymore, but could cause cross-browser issues, I would then have a span there with a class, not a div, as a div is a block element & span is inline-block.
    I notice that your “center” is also including your social icons, you will not want this when you use the span
    So in your socket you will want to use float: none;
    and to center try using:

    .socket.class {
        display: flex;
        justify-content: center;
    }

    Typically this works well, please try.
    I hope I made since while trying to explain :)

    Best regards,
    Mike

    #961545

    Thanks for the reply!

    Can you give me a complete breakdown on how to structure it?

    Should I remove all the code I mentioned and replace it with

    .socket.class {
        display: flex;
        justify-content: center;
    }

    in quick css?

    #961916

    Hi,
    That is the idea, but the class needs to be created also.
    Can you please include a admin login in the private content area so we can take a closer look without the current code.

    Best regards,
    Mike

    #962427

    Provided log in details in private content

    I also removed all of the code mentioned above. Only the 6 image URL:s are left in Enfold -> Footer -> Copyright area. I would like if they are set to max height 25px.

    #962495

    Hi,
    Sorry, the display flex is not going to work as I expected there.
    But I did add the class “socket-logos” to your logos and added this css to the Quick CSS:

    #socket .socket-logos img {
    max-height: 25px;
    margin-left: 10px;
    }
    
    @media only screen and (max-width: 600px) { 
    #socket .copyright {
        float: left;
        width: auto;
        text-align: center;
    }
    #socket .socket-logos {
     float:left;
    margin-left: 14%;
    }
    #socket .social_bookmarks {
    margin-right: 29% !important; 
    }
    }
    @media only screen and (min-width: 601px) and (max-width: 700px) { 
    #socket .copyright {
        float: left;
        width: 100%;
    }
    #socket .socket-logos {
     float:right;
    }
    }
    @media only screen and (min-width: 701px) and (max-width: 779px) { 
    #socket .copyright {
        float: left;
        width: 72%;
    }
    #socket .socket-logos {
     float:right;
    }
    #socket .social_bookmarks {
    margin-left: 0 !important; 
    }
    }
    @media only screen and (min-width: 780px) { 
    #socket .copyright {
        float: left;
        width: 62%;
    }
    #socket .socket-logos {
     float:right;
    }
    }

    With this in mobile, the copyright, logos, and social icons center on 3 lines,
    in tablet and up they all make one line with the logos centered.
    All major screen sizes are adjusted.
    Please clear your browser cache and check.

    Best regards,
    Mike

    #964919

    Really thankful for the help and support provided!
    It works, but needs some adjustments.

    It looks good in mobile, and tablet landscape.
    However, in tablet portrait and desktop the images are off center.
    I would say its most important they are perfectly centered in desktop.

    I provided a screenshot in private content.

    #965039

    Hi,
    I tried a different approach, I added this to your functions.php:

     function move_socket_logos(){
      ?>
      <script>
    jQuery(window).load(function(){
      jQuery( '#socket .container' ).each(function() {
      jQuery( this ).find( 'span.socket-logos' ).insertAfter( jQuery(this).find('span.copyright') );
      });
      });
      </script>
      <?php
      }
      add_action('wp_footer', 'move_socket_logos');

    and replaced the above css with this in the Quick CSS:

    @media only screen and (min-width: 676px) {
    #socket .copyright {
        float: none!important; 
        width: auto;
    }
    #socket .social_bookmarks {
        float: none!important; 
        margin: -10px 0 0 0!important; 
        width: auto!important; 
        display: inline-block!important; 
    }
    #socket .socket-logos {
        float: none!important; 
        width: auto !important;
        margin-left: 0!important; 
    }
    #socket .container {
        display: flex !important; 
        justify-content: center !important; 
    }
    }
    @media only screen and (min-width: 1340px) { 
    #socket .social_bookmarks {
        margin-left: 28%!important; 
    }
    #socket .socket-logos {
        margin-left: 25%!important; 
    }
    }
    @media only screen and (min-width: 676px) and (max-width: 1339px) { 
    #socket .social_bookmarks {
        margin-left: 8%!important; 
    }
    #socket .socket-logos {
        margin-left: 5%!important; 
    }
    }
    @media only screen and (max-width: 675px) {
    #socket .copyright,#socket .socket-logos,#socket .social_bookmarks {
        display: flex !important; 
        justify-content: center !important; 
        float: none !important; 
        margin-left: 0 !important; 
    }
    }

    Please clear your browser cache and check.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.