This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Image without distance?

Open 29 replies premiumthemetheme-vantage
FishermansFriend
10 years ago · Last reply by Andrew Misplon 10 years ago

Hey there,

is it possible to set this one image to the boarder without any space between boarder and image?
Please have a look to the image here: http://s27.postimg.org/p2t7ki1zn/imgpadding.jpg

Thanks for your support,
Simon

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

29
  1. Andrew Misplon Staff 10 years, 9 months ago

    Hey Simon

    Is this site live? Could we take a look? If needs be you can use the Private Reply option to send the URL privately.

  2. FishermansFriend Private 10 years, 9 months ago

    This is a private message.

  3. Andrew Misplon Private Staff 10 years, 9 months ago

    This is a private message.

  4. FishermansFriend Private 10 years, 9 months ago

    This is a private message.

  5. Andrew Misplon Staff 10 years, 9 months ago

    No problem :)

    There are a few ways to do this. Try inserting the following at Appearance > Custom CSS:

    /* Dienstleistungen */
.page-id-45 #main {
padding: 35px 0 0;
}
.page-id-45 .entry-content .alignright {
margin-bottom: 0;
}
.page-id-45 .entry-header .entry-title {
margin-left: 35px;
}

    If the design changes and this no longer works for you just let me know and I’ll figure out another way to make this happen.

  6. FishermansFriend 10 years, 9 months ago

    wow, that works perfect!!!
    your help is awesome, thanks man!

  7. Andrew Misplon Staff 10 years, 9 months ago

    Super, glad that helped :)

    All the best.

  8. Andrew Misplon Staff 10 years, 9 months ago

    In the Custom CSS above I sent three rules. Please remove the last rule and instead insert the below.

    .page-id-45 .entry-header .entry-title, 
.page-id-45 .entry-content p {
  margin-left: 35px;
}
  9. FishermansFriend Private 10 years, 9 months ago

    This is a private message.

  10. Andrew Misplon Staff 10 years, 9 months ago

    The Custom CSS above should sort this out.

  11. Andrew Misplon Staff 10 years, 9 months ago

    We just mailed at the same time :)

  12. FishermansFriend 10 years, 9 months ago

    perfect!!! :-) thanks man!

  13. Andrew Misplon Staff 10 years, 9 months ago

    For sure :)

  14. FishermansFriend Private 10 years, 9 months ago

    This is a private message.

  15. Magus Staff 10 years, 9 months ago

    Hi Simon

    I hope you don’t mind me jumping in here.

    This is the only exclusion to the method that Andrew gave you before. If you use a default home page the page-id is not generated, instead the page-id tag is set to ‘home’. The CSS for this would then be

    .home .entry-header .entry-title, 
.home .entry-content p {
  margin-left: 35px;
}

    Magus

  16. FishermansFriend 10 years, 9 months ago

    Hey Magus,

    thanks for your answer!

    If I use this one

    .home #main {
padding: 35px 0 0;
}
.home .entry-content .alignright {
margin-bottom: 0;
}
.home .entry-header .entry-title, 
.home .entry-content p {
  margin-left: 35px;
}

    its getting better but still not perfect, there is a “free space” from about 5-6 pixel on the buttom of the picture :-(! But I don’t understand why, on the other page it works perfect…!

  17. Magus Staff 10 years, 8 months ago

    Hi Simon

    Please change the last CSS entry to read

    .home .entry-header .entry-title, .home .entry-content p {
    margin-left: 35px;
    line-height: 0px;
}

    Let us know if this fixes it.

    Magus

  18. FishermansFriend 10 years, 8 months ago

    perfect! thanks Magus!

  19. Magus Staff 10 years, 8 months ago

    Hi Simon

    Excellent. If you need any more help please feel free to open a new support thread.

    Magus

  20. FishermansFriend Private 10 years, 8 months ago

    This is a private message.

  21. Magus Staff 10 years, 8 months ago

    Hi Simon

    We’ll take a slightly different tack. Please remove the bottom segment of code and replace with this

    .page-id-493 .entry-content p:last-of-type {
    line-height: 0px;
    margin: 0px;
}
.page-id-493 .entry-header .entry-title, .page-id-493 .entry-content p {
    margin: 0 35px;
}

    We’ll use the last of type to target only the last content that is surrounded by paragraph tags. This should fix all the issues.

    Let us know how it goes.

    Magus

  22. FishermansFriend 10 years, 8 months ago

    That works great! It’s exactly what I want.
    Only on the iPhone is a white line between the picture and the bottom of the website…

  23. Magus Staff 10 years, 8 months ago

    Hi Simon

    Please add the following to fix that

    @media all and (max-width:680px) {
.page-id-493 #secondary {
    margin-top: 0px !important;
}
}

    Magus

  24. FishermansFriend Private 10 years, 8 months ago

    This is a private message.

  25. Magus Staff 10 years, 8 months ago

    Hi Simon

    The code used unfortunately is not universal in it’s approach. It does rely on you building the page in the same manner with each item in it’s own paragraph. For this page you have added the image and text inside the same paragraph tags, and you have an unused paragraph tag above the image. The text and image must be in separate tags to be able to target them correctly.

    If you switch the editor to text mode you will see what I mean. If you adjust the code to this

    <p >
<img width="700" height="575" class="alignleft wp-image-508 size-full" alt="dl_elementbau-0" src="http://home.beautifulday.ch/bornhauser-holzbau.ch/wp-content/uploads/dl_elementbau-0.jpg" abp="70">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    you can then use this for the alignment after removing the entry for ‘last-of-type’

    .page-id-449 .entry-content p:first-of-type .alignleft, .page-id-449 .entry-content p:first-of-type {
    margin: 0px;
    line-height: 0px !important;
    margin-right: 35px;
}

    Notice in this case the use of ‘first-of-type’ instead of ‘last-of-type’ to specifically target the paragraph and ‘.alignleft’ to override the default behaviour.

    Using this for left aligned images and the previous CSS for right aligned images should be all you need.

    Let us know how you get on

    Magus

  26. FishermansFriend Private 10 years, 8 months ago

    This is a private message.

  27. Magus Staff 10 years, 8 months ago

    Hi Simon

    You removed a bit too much. Please re-add this section

    .page-id-449 .entry-header .entry-title, .page-id-449 .entry-content p {
    margin: 0 35px;
}

    Magus

  28. FishermansFriend 10 years, 5 months ago

    Hi Magus and Androw,

    sorry I have one more question…!

    /* Startseite */
.home #main {
padding: 35px 0 0;
}
.home .entry-content .alignright {
margin-bottom: 0;
}
.home .entry-header .entry-title, .home .entry-content p {
    margin-left: 35px;
    line-height: 0px;
}

    So with the line-high – Tag if got some troubles with the text. When I deacitive this Tag than it works with the text, but then I have at the bottom some Space between the image and the other bottom. Is there a chance that this would work?

    Problem text: http://s14.postimg.org/w3nyhiwm8/Bildschirmfoto_2015_09_15_um_21_43_17.jpg
    Problem space: http://s14.postimg.org/ojuvfh3fj/Bildschirmfoto_2015_09_15_um_21_43_46.png
    Thanks, Simon

  29. Andrew Misplon Staff 10 years, 5 months ago

    For sure, line-height 0 won’t work. Do you know why you needed that? Ideally, the last rule should just be:

    .home .entry-header .entry-title, .home .entry-content p {
    margin-left: 35px;
}

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread