• I want to add an image to the footer, size 500w by 420h. I tried adding it in the footer widget, but I cannot get the size right. I looked through the css file but I’m not sure which section to change/add the width and height. Any suggestions? Thanks.

Viewing 11 replies - 1 through 11 (of 11 total)
  • If you post a link to your site so we can examine it, you’ll have a better chance of someone offering CSS suggestions.

    Thread Starter lewgard

    (@lewgard)

    Sorry…it’s https://www.ewomanweb.com

    Any help greatly appreciated.

    Thanks for the link, but I don’t see an image in the footer. I guess you must have taken it out when you couldn’t get it to size correctly?

    Thread Starter lewgard

    (@lewgard)

    You’re right…it’s back in now. It’s in a widget, but I still cannot figure out how to enlarge it.

    Great, thanks.

    The main problem is that the footer widgets have a width of 30.8%. I don’t know if that’s because only three widgets can be added, but since you only have one, we can add some custom CSS (the Esplanade theme has a custom CSS option) to make it fill the whole footer:

    #footer-area #text-16 {
    	width: 100%;
    }
    #text-16 img {
    	width: 100%;
    }

    The first CSS rule stretches the text widget across the entire footer while the second rule makes the image itself stretch across. You can, of course, use different percentage values for the image, depending upon how much of the space you want to fill. I used percentages so the image will be responsive as the browser window resizes.

    Thread Starter lewgard

    (@lewgard)

    Thanks for your time and assistance, CrouchingBruin. Unfortunately, I cannot get the image to enlarge. I’m stumped. Guess I don’t know enough CSS to figure it out.

    Now I’m thinking of finding a plugin that zooms the image on hover. If I can find a simple one that works with the most recent WordPress version.

    Anyway…thanks for all your help.

    Where did you add the CSS, in the theme’s custom CSS option?

    Nevermind, I see it in the source. I wonder why it’s not working…

    OK, I see the problem. In your custom CSS, you have this rule:

    #header-image {
    	display:block;
    	max-width:99.1%;
    	padding:0.5%;
    	margin: 1.56% 0px;
    	box-shadow:0 0 0px #999;
    	background:none;
    	height: 130px;
            min-width: 900px;
    )

    The problem is that the rule is ended with a right parenthesis ) instead of a right bracket }, which means that rule, plus all of the CSS rules which follow it, aren’t working. Change the right parenthesis to a right bracket and the rest of your custom CSS should work (hopefully not with unintended consequences).

    Thread Starter lewgard

    (@lewgard)

    Ahhh haaaa !!! You are the best ! It worked perfectly. I just need to tweek the image size and quality; that is an easy fix for me.

    And I think I need stronger eyeglasses…

    Thank you so much!

    You’re welcome. And I think I’m going to browse through your site, it looks like it might have some good info on how I can make some money on the side. ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How can I add an image to the footer? Esplanade Theme’ is closed to new replies.