WordPress.org

1. naigotsoul
   Member
   Posted 4 months ago #
   

   We just got a new custom logo for our site and would like to have it centered. We tried to play with the CSS but perhaps just didn't have the right coding in. So how do we do this?

   Thanks

2. Andrew Nevins
   Volunteer Moderator
   Posted 4 months ago #
   

   What coding did you try?

3. naigotsoul
   Member
   Posted 4 months ago #
   

   #header {
   align: center;
   {

   .header-img {
   align: center;
   }

   We went to the CSS panel not sure if that was the correct spot or not as well...

4. Andrew Nevins
   Volunteer Moderator
   Posted 4 months ago #
   

   align is not a CSS property, but try this article for centering things http://www.w3.org/Style/Examples/007/center.en.html

5. naigotsoul
   Member
   Posted 4 months ago #
   

   .header-image {
   margin-top: 24px;
   margin-top: 2.4rem;
   display: block;
   margin-left: auto;
   margin-right: auto }

   placed this into the CSS as directed by the link. But its still not working. Do we need to identify the source img and if so what does that format look like...? src..?

   Thanks for your help btw if you couldn't tell we're novices to editing CSS lol

6. Andrew Nevins
   Volunteer Moderator
   Posted 4 months ago #
   

   It looks like you're missing a width style from that code.

7. naigotsoul
   Member
   Posted 4 months ago #
   

   .header-image {
   margin-top: 24px;
   margin-top: 2.4rem;
   display: block;
   margin-left: auto;
   margin-right: auto;
   height: 300px;
   width: 300px; }

   and still no luck...

8. Andrew Nevins
   Volunteer Moderator
   Posted 4 months ago #
   

   Where are you adding the code?

9. naigotsoul
   Member
   Posted 4 months ago #
   

   In the edit CSS panel. Though I had to go into the advanced code to pull the proper classes because before I didn't have them identified correctly.

10. Andrew Nevins
    Volunteer Moderator
    Posted 4 months ago #
    

    Is the CSS panel named, "Custom CSS" or similar?

11. alchymyth
    The Sweeper & Moderator
    Posted 4 months ago #
    

    if you could post a live link to your site, someone can check the code and possibly suggest something to center the header image.

12. naigotsoul
    Member
    Posted 4 months ago #
    

    http://www.swaytheblog.com/

    I'm under the Edit CSS panel

    Thankyou

13. Andrew Nevins
    Volunteer Moderator
    Posted 4 months ago #
    

    As you've stated you were incorrectly selecting the image, have you resolved this?

14. naigotsoul
    Member
    Posted 4 months ago #
    

    yes

15. naigotsoul
    Member
    Posted 4 months ago #
    

    I'm sorry this is not resolved I never heard back about suggestions on the code

16. Andrew Nevins
    Volunteer Moderator
    Posted 4 months ago #
    

    Can you apply your code;
    

    .header-image {
    margin-top: 24px;
    margin-top: 2.4rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 300px; }

    To the correct element?

17. naigotsoul
    Member
    Posted 4 months ago #
    

    the correct element is:

    .site-header img

    I applied the suggested code and it didn't move the item center at all. The height and width properties also distorted the image dimensions.

18. Andrew Nevins
    Volunteer Moderator
    Posted 4 months ago #
    

    The problem is, the element containing it has a small set width, therefore the image can only centre within that small width [screenshot].

    Try using a Browser Developer tool for this kind of CSS exploratory work. I used Google Chrome's built-in developer tool in that example.

    Once you sort out that width, you can sort out the image's width that is distorted.

19. naigotsoul
    Member
    Posted 4 months ago #
    

    THANKYOU! redefined the width and it worked!!!!

Reply

You must log in to post.