Add and center images in socket area - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 24, 2018 at 2:15 am #961304
belinger
Participant
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
May 24, 2018 at 5:18 am #961334
Mike
Moderator
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
May 24, 2018 at 2:18 pm #961545
belinger
Participant
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?
May 25, 2018 at 2:05 am #961916

Mike
Moderator

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

May 25, 2018 at 9:58 pm #962427

belinger
Participant

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.

May 26, 2018 at 3:51 am #962495
Mike
Moderator
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
May 31, 2018 at 8:26 pm #964919

belinger
Participant

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.

June 1, 2018 at 4:15 am #965039
Mike
Moderator
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
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.