Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 20, 2020 at 12:25 pm #1176255
    SvHa

    Hi, I am using two logos in the header. I followed the instruction in the following link:

    Example of multiple logos above the menu

    Everything is fine so far except this: I am using two logos and the left logo is aligned to the left and the right logo to the right. BUT I want them to be centered in total, means: align the left logo to the right and the right logo to the left. Result should be that they are both in the middle of the screen.

    actual situation:
    X—————Y

    wanted situation:
    ———X-Y———

    Can you help me?
    Thanks a lot :-)
    Sven

    January 20, 2020 at 8:54 pm #1176432
    Victoria

    Hey SvHa,

    It seems to me, that it is better to place both images on one png file and use it as the logo. You will not need to use the header widget then.

    Best regards,
    Victoria

    January 20, 2020 at 8:57 pm #1176436
    SvHa

    Thanks Victoria, i had the same idea, but i have to make two different links on the two logos :-( Any idea? Thanks, Sven

    January 20, 2020 at 9:52 pm #1176478
    Victoria

    Hi SvHa,

    Ok, let’s try :)

    
#media_image-3 {
  margin-left: 20vw;
}
#media_image-2 {
  margin-right: 20vw;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    January 20, 2020 at 9:53 pm #1176483
    SvHa

    … tried to use a Textwidget or HTML widget to include HTML/CSS, but it did not work. I am more a designer, not a developer :-(
    Do you think this starting point might work?

    January 20, 2020 at 10:06 pm #1176492
    Victoria

    Hi SvHa,

    You need to add this code to the Quick css :)

    Best regards,
    Victoria

    January 21, 2020 at 9:37 am #1176615
    SvHa

    Hi Victoria,
    thank you. I tried it and changed it to the following. Maybe its a little complicated but it seems to work.
    But there is one more thing i do not like: on small screens (smartphone) the logos are to small – do you have a solution for this problem as well?
    Thanx :-)

    @media only screen and (max-width: 1500px) {
    #media_image-4 {
    margin-left: 20vw;
    }
    #media_image-5 {
    margin-right: 20vw;
    }
    }

    @media only screen and (min-width: 1501px) and (max-width: 2000px) {
    #media_image-4 {
    margin-left: 15vw;
    }
    #media_image-5 {
    margin-right: 15vw;
    }
    }

    @media only screen and (min-width: 2001px) {
    #media_image-4 {
    margin-left: 10vw;
    }
    #media_image-5 {
    margin-right: 10vw;
    }
    }

    January 22, 2020 at 7:53 pm #1177261
    Victoria

    Hi SvHa,

    Your queries are mostly for big screens, you need to play with the values for the small screens too.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  #media_image-5 {
      margin-right: 7vw;
      width: 35vw;
  }
  #media_image-4 {
    margin-left: 8vw;
     width: 35vw;
}
.responsive #top #header #header_main .inner-container .widget {
      flex-basis: initial;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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