Need help? Check out our Support site, then


CSS Image alignment - extend image to header and footer

  1. I'm looking to use CSS to reposition an image flush to the left margin, leaving no space between the edge of the webpage and the image. I would also like this image to extend up to the header and end at the footer widget. Does this require several divs or how do I proceed with coding this portion of the webpage?

    Thank you!

    The blog I need help with is indigocapital.ca.

  2. Hi there, can you point me to the location or page where you want to do this and I can take a look for you. I'm not seeing anything on your site that looks like the right page right now.

  3. Hello! The changes will be made to the homepage. The image I would like to have extended is the IND IGO. The text that is currently underneath will be moved to the right of that image.

  4. Hi, you can give the following a try and see what you think. We may have to do some additional adjustments once you have the text moved.

    body:not(.no-sidebar).home .site-content-wrapper {
    	margin-left: 0;
    	width: 100%;
    	max-width: 100%;
    }
    body:not(.no-sidebar).home .content-area {
    	width: 100%;
    }
    body:not(.no-sidebar).home .content-area .hentry-wrapper {
    	width: 100%;
    	max-width: 100%
    }
    body:not(.no-sidebar).home .site-content-wrapper #post-40 {
    	padding: 0;
    }
  5. Thank you so much! How do you suggest creating an additional column with margins to place the text in?

    Also, do you know the proper selector for the wordpress logo that appears in the credits? I previously used footer-credit to center the logo, but no changes occurred.

  6. Hi, for the WordPress footer logo, add the following to center it.

    .site-info {
    	margin-left: auto;
    	margin-right: auto;
    }

    Having the text to the right of the image may be a bit tricky. First thing you will need to do is to edit the front page and wrap the image in a div with a new CSS class, and then do the same for the text below. It would look like this.

    <div class="frt-img">
    <h3 style="text-align:justify;"><img class="  wp-image-89 alignleft" src="https://indigocapital.files.wordpress.com/2017/01/ind-igo1.png?w=2040" alt="ind-igo" width="810" height="678" /></h3>
    </div>
    <div class=frt-txt">
    <h3 style="text-align:justify;"><span style="color:#ffffff;">We believe that the key to innovation and growth is equal parts creativity and execution. Indigo Capital is in the business of bringing them together.</span></h3>
    <h1><strong><span style="letter-spacing:5px;color:#727eaf;">IDEAS</span><span style="letter-spacing:5px;color:#ffffff;"> IN ACTION.</span></strong></h1>
    </div>

    We can then work on getting the text to the right of the image.

  7. Thank you! The code successfully centered the footer logo, but still appears on the left in the tablet and mobile views. In regards to the body text, I tried to float the text right, but no changes appeared. What is your suggested method to move the text?

  8. On the footer text, I didn't notice they take the .site-info div full width on narrower windows. Add text-align: center; to that rule so it looks like this.

    .site-info {
    	margin-left:auto;
    	margin-right:auto;
    	text-align: center;
    }
  9. I'm trying to move the text to the right of the image using display:inline; however, only half of the sentence moves. I've tried several variations and at one point, the entire sentence appeared for a short second.

    I believe I also need to apply space at the top above the body text so that it starts at the same level at the "IND" of the image to the left. I was doing this by adding padding-top:13%; but it could be margin-top:13%; - depending on what works best and the percentage is not fixed either at the moment.

    Do you know how this could be resolved? And how all of the body text (including "IDEAS IN ACTION") can be moved to join the portion of the body text that already appears on the right?

    If it is possible to attach a photo to the forum, I can provide an image of the homepage design I am trying to achieve.

  10. @indigocapital, several posts back I asked you to make some changes to the content in the page, and you have not made those changes so that I could work out the code.

    I copied out all of your code, put it into my test site and made the changes. Open your page in the editor, switch to the Text tag and remove all the content and then paste in the following.

    <div class="frt-img">
    <h3 style="display:inline;padding-right:15px;"><img class="  wp-image-89 floatleft" src="https://indigocapital.files.wordpress.com/2017/01/ind-igo1.png?w=2040" alt="ind-igo" width="810" height="678" /></h3>
    </div>
    <div class="frt-txt">
    <h3><span style="color:#ffffff;">We believe that the key to innovation and growth is equal parts creativity and execution. Indigo Capital is in the business of bringing them together.</span></h3>
    <h1><strong><span style="letter-spacing:5px;color:#727eaf;">IDEAS</span><span style="letter-spacing:5px;color:#ffffff;"> IN ACTION.</span></strong></h1>
    </div>

    And then this is the CSS that you need to put at the very bottom of your custom CSS, below everything else.

    @media screen and (min-width: 600px) {
    .frt-img {
    	max-width: 50%;
    	float: left;
    }
    .frt-txt {
    	max-width: 45%;
    	float: right;
    	margin-top: 19%;
    }
    }
    @media screen and (max-width: 599px) {
    .frt-txt {
    	text-align: justify;
    	padding-left: 10px;
    	padding-right: 10px;
    }
    	frt-img {
    	margin-left: 10px;
    	margin-right: 10px;
    }
    }

    I've limited this change to screens/windows 600px and wider since below that point the text gets really narrow and hard to read.

Topic Closed

This topic has been closed to new replies.

About this Topic