WordPress.org

Ready to get started?Download WordPress

Forums

responsive site loge (twenty twelve) (14 posts)

  1. sagiglb
    Member
    Posted 11 months ago #

    Hello,

    I changed my site title into an image.
    Now, the image is not responsive.

    What can I do to make it work?

    Thanks

  2. Siobhan Bamber (siobhyb)
    Forum Mod.
    Posted 11 months ago #

    Could you please provide a link to your site so that we can better help with the problem? Thanks.

  3. sagiglb
    Member
    Posted 11 months ago #

  4. Christiaan Conover
    Member
    Posted 11 months ago #

    I see a couple of problems. You have inline style applied to the logo image that states float: center which is an invalid value for the float attribute. You should also avoid using inline style, and instead assign a class name to the image and place the CSS in your style.css file. Create a child theme to make any modifications to your theme's style.

    I assume that what you mean by "the image is not responsive" is that it won't scale down on smaller viewports. Here's what I'd recommend you have for CSS on the image (I'll explain each attribute afterward):

    width: 100%;
    max-width: 100%;
    margin: 0 auto;

    The first one is pretty self-explanatory: you want the image to fill the width of it's container. Max-width is slightly more tricky - this makes sure that the image is never wider than its container, so if the container is scaled down to be smaller than the size of the image, the image will be scaled proportionally to stay inside the container. This is the part that makes your image responsive.

    The last part, the margin attribute, is what will center your image. As I have it above, there will be a margin of 0 on the top and bottom, and the browser will determine equal margin on either side depending on the size of the image and its container. This value depends on having a width specified so it can calculate the side margins, which is why width: 100% is important.

  5. sagiglb
    Member
    Posted 11 months ago #

    thank you,

    I'm not sure where to add this lines since there's no place where it's talks about the site image (I think it thinks that there is text instead).

    about the float, I changed it to the former value which was 'right'

    Thank you a lot again

  6. Christiaan Conover
    Member
    Posted 11 months ago #

    Where did you go to change the site title to the logo image? Wherever that was, you'll want to go back there and remove the style attribute of the img tag, and replace it with class="yourclassnamehere" so you can manipulate it with CSS in your style.css.

    Once you've done that, open your style.css file and find a logical place to insert your CSS rules for the logo. Then add the following:

    .yourclassnamehere {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    Class names are identified with a period before them in CSS. Obviously you'll replace "yourclassnamehere" with whatever you choose for the class to be called.

  7. sagiglb
    Member
    Posted 11 months ago #

    my header look like that:

    <h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="http://www.mesudarotil.com/wp-content/uploads/2013/08/logo.png" style="float: right;" alt="Logo" /></a></h1>

    [Please post code & markup between backticks or use the code button. Your posted code has now been permanently damaged by the forum's parser.]

    so, I'll add to my CSS this code (under header):

    .site-title {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    am I right?

  8. Christiaan Conover
    Member
    Posted 11 months ago #

    Not quite. Here's what you'll want to have in your header instead of what is currently there:

    <h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="http://www.mesudarotil.com/wp-content/uploads/2013/08/logo.png" alt="Logo" /></a></h1>

    Then, inside the theme file named style.css you'll want to put the following:

    .site-title {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    So you were close, but not quite there. The file style.css is where all CSS rules go for a theme, and are then applied when your browser loads a page.

  9. sagiglb
    Member
    Posted 11 months ago #

    Thank you!

    I did it and something went wrong.
    Now there is some text near the logo image and it's not longer at the centre.

    Not talking about the size who still won't scale down on smaller viewports.

    I'm appreciating your help!

  10. Christiaan Conover
    Member
    Posted 11 months ago #

    My mistake, I didn't proofread what I put in my last post for the header. Replace the header tags with the following:

    <h1 class="site-title"><a title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="http://www.mesudarotil.com/wp-content/uploads/2013/08/logo.png" alt="Logo" /></a></h1>

  11. Christiaan Conover
    Member
    Posted 11 months ago #

    As a side note, it looks like you're making these changes directly on the live site. A better practice is to maintain a development site where you can test changes before deploying them, so that you catch typos and bugs before the code is out in the wild.

  12. sagiglb
    Member
    Posted 11 months ago #

    Thank for your help!
    But it still won't scale down on smaller viewports.

    About the changes, this site is development site while there is another one up.
    I made this site because I wanted to create a WordPress site (the other one is not).

    Another mistake I made is working on the theme files instead on a child theme.
    It's my first site ever so I really new to these world. I guess after I'll finish build it I'll make a child theme with all the changes I made.

  13. Christiaan Conover
    Member
    Posted 11 months ago #

    I'm looking at the site on a variety of devices and I'm not seeing an issue with the image showing improperly. Are you simply wishing it would be smaller on smaller viewports? If that's the case, you can adjust the value of max-width to a number less than 100%, which will force it to scale down.

  14. sagiglb
    Member
    Posted 11 months ago #

    I did it and nothing changed

Reply

You must log in to post.

About this Topic