Generic icon not centering correctly on phone

  • Hi

    Thank you for a great theme first of all.

    I have made the following modifications to the child theme that I am using on hotel site that I made this week https://www.lacasadelabueloollantaytambo.com and I am having a few troubles.

    I changed the icon in the middle of the page to a house and for some reason it doesent center correctly on phones. What did I mock up? I know it is not your job to find the problem for me but I am completely new to making websites with only a weeks experience.

    Another trouble I am having is with the tripadvisor html element in the footer. I am trying to make it appear next to hotel info on the right and have tried adding different aproaches to make it move there, but I suck and cant get it to move. Tried float: right but it just made the text and picture on top of each other. If you can help me that would be great.

    I apreciate any help you may provide me.

    Best regards
    jagi

Viewing 1 replies (of 1 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    If you narrow your browser window slowly, you will see that the circle that the house icon is in gets smaller at 755px. Above 755px, the circle is basically 80px in diameter while at 755px and below it is 60px in diameter. I would suggest using a media query to correct the alignment for 755px and narrower windows like this.

    @media screen and (max-width: 755px) {
    .hentry.type-page::before {
        top: -34px;
        line-height: 62px;
    }
}

    See what you think with the above.

Viewing 1 replies (of 1 total)
  • The topic ‘Generic icon not centering correctly on phone’ is closed to new replies.