WordPress.org

Ready to get started?Download WordPress

Forums

ColorWay
Colorway Lite - Center Logo - off center on phone/tablet (17 posts)

  1. robhob
    Member
    Posted 1 year ago #

    I've made a couple of changes to the lite version of Colorway including centering of the logo. Now, when I view the homepage on a tablet or phone the logo is off center. Here's the CSS change I made to center it:
    .logo img {
    margin-left: 32%;
    }

    Many thanks

    Rob

  2. wp-21
    Member
    Posted 1 year ago #

    could you post the link for the site.

  3. robhob
    Member
    Posted 1 year ago #

    Sorry, my bad. Here goes:
    http://www.oohlaladecor.co.za

  4. wp-21
    Member
    Posted 1 year ago #

    You need to remove that margin and to make it responsive add

    .logo img {
        max-width: 100%;
    }
  5. robhob
    Member
    Posted 1 year ago #

    Okay, I've updated the CSS as you suggested. What do you mean by remove the margin?

  6. wp-21
    Member
    Posted 1 year ago #

    i meant that for the tablet and mobile the screen width is so small there is no need for the margin-left.

  7. robhob
    Member
    Posted 1 year ago #

    Okay, I see what you mean. My logo now though has returned to the left side on my desktop. It's centred on the phone but also left of the table.

  8. wp-21
    Member
    Posted 1 year ago #

    it is recommended to use a child theme to do any edits.the above css changes should be done in the child theme stylesheet file

  9. robhob
    Member
    Posted 1 year ago #

    I have created a child theme and am using the Edit CSS plugin provided by Jetpack.

  10. wp-21
    Member
    Posted 1 year ago #

    great...That is ideal..

  11. wp-21
    Member
    Posted 1 year ago #

    Pls close the topic if reolved....
    cheers..:)..

  12. robhob
    Member
    Posted 1 year ago #

    Hi wp-21

    Unfortunately I still haven't managed to figure out how to center the logo.

    Thanks for all your efforts.

  13. wp-21
    Member
    Posted 1 year ago #

    You mean to say you want it centered on your desktop site also.

  14. wp-21
    Member
    Posted 1 year ago #

    As your theme is responsive, you need to provide margin-left for the larger widths and remove it for the smaller widths as it might have been done in your style.css currently via media-queries.

  15. robhob
    Member
    Posted 1 year ago #

    Okay, I'll give it a bash later. I'm going to leave this topic open and publish the changes - if I figure it out.

  16. wp-21
    Member
    Posted 1 year ago #

    Ok.

  17. robhob
    Member
    Posted 1 year ago #

    Ended up adding this to the custom CSS:
    .logo img {
    margin-left: 165px;
    }
    @media only screen and ( max-width: 768px ) {
    .logo img {
    margin-left: 1px;
    }
    }
    @media only screen and (max-width: 960px) and (min-width: 768px){
    .logo img {
    margin-left:75px;
    }
    }
    @media only screen and (max-width: 767px) and (min-width: 480px){
    .logo img {
    margin-left: 1px;
    }
    }

    @media only screen and (max-width: 480px){
    .logo img {
    margin-left: 1px;
    }
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic