Moving Featured Images on Blogs with CSS.

by LearnNOTmoney

Posted: 11 years ago 8 replies

WEB DESIGN

I've been trying to move my featured images on my blogs Make Fitness Simple – Ways to make fitness Simple It's basically home page inserted with a blog code. I've been watching youtube videos and browsing the net and this seems to be the common CSS to use when moving images.

.imga { float: left ;
margin-left: 50px
}

Unfortunatley, It's just not working for me. I'm not exactly if i'm putting it on the wrong CSS box on my theme or if my CSS is wrong.

Thanks.

#blogs #css #featured #images #moving

denysapu 11 years ago

Which featured images you mean?
- Thanks
- 1 reply
Signature

Don't worry be happy!
{{ DiscussionBoard.errors[7453765].message }}
- LearnNOTmoney 11 years ago
  
  Originally Posted by denysapu
  
  Which featured images you mean?
  
  The images that shows on the blog/articles. I wanted to move it to the lef instead of the current design being at top of the article. I want it to have a cleaner look.
  
  Thanks
  
  {{ DiscussionBoard.errors[7453815].message }}
nesterdwarf 11 years ago

In a regular HTML document, what you have there would work. However, inside WP things can get tricky... Making the following changes to your 'styles-default.css' should accomplish what you are wanting to do -

.the-post-content
{
clear: left; <---REMOVE THIS
padding: 18px 15px 0;
margin: 0 0 22px;
}

.entry-header
{
margin-bottom: 23px;
margin-left: 150px; <---ADD THIS
}

.entry-content {
font-size: 12px;
line-height: 1.4;
margin-left: 150px; <---ADD THIS
margin-top: -120px; <---ADD THIS
}

HTH
ND
- [ 1 ] Thanks
- 1 reply
{{ DiscussionBoard.errors[7453998].message }}
- LearnNOTmoney 11 years ago
  
  Thank you very much. I will thank you for years to come
  
  EDIT: It worked, i only have one problem though the spacing between the text and the image is too small making some letters difficult to see.
  
  Thanks
  
  {{ DiscussionBoard.errors[7457136].message }}
clickbump 11 years ago
Add this to your css:
Code:

.the-post-image figure{float:left}
- [ 1 ] Thanks
- 1 reply
Signature

******** WORLD'S FASTEST WORDPRESS THEME + 99/100 PageSpeed ********

*NEW* Learn ClickBump! | Get ClickBump Theme WSO | Get ClickBump SEO!

Live Demos: "Perfect Silo" | Killer "Landing Page" | Mashable Skin
Watch ClickBump Smoke Thesis/Genesis
{{ DiscussionBoard.errors[7457403].message }}
- LearnNOTmoney 11 years ago
  
  Originally Posted by clickbump
  
  Add this to your css:
  
  Code:
  
  .the-post-image figure{float:left}
  
  hi. i've tried doing this before but it did not work.
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[7457522].message }}
  
  clickbump 11 years ago
  
  Originally Posted by LearnNOTmoney
  
  hi. i've tried doing this before but it did not work.
  
  OK, in that case, you may need to add the !important directive to the end of the css, since it depends on the order of appearance in the css stack.
  
  Here's the revised css:
  
  Code:
  
  .the-post-image figure{float:left !important}
  
  If you still need help, PM me and I can check it out for you.
  
  Thanks
  
  Signature
  
  ******** WORLD'S FASTEST WORDPRESS THEME + 99/100 PageSpeed ********
  
  *NEW* Learn ClickBump! | Get ClickBump Theme WSO | Get ClickBump SEO!
  
  Live Demos: "Perfect Silo" | Killer "Landing Page" | Mashable Skin
  Watch ClickBump Smoke Thesis/Genesis
  
  {{ DiscussionBoard.errors[7465223].message }}
nesterdwarf 11 years ago

You should be able to increase the two values for margin-left (150px in the example, try making them 165 or so...) to move the text over more...

ND
- [ 1 ] Thanks
{{ DiscussionBoard.errors[7459160].message }}