WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] Pinboard theme- add image to page entry title (10 posts)

  1. creativejunkie
    Member
    Posted 9 months ago #

    Hi,

    I'm having two problems, I hope someone can help:

    1. Firstly i've added a background image to my page headings using this code:

    .page .entry-title {
    background-image: url('http://girlsaglow.co.uk/site/wp-content/uploads/images/titlepostit_2.png');
    background-repeat: no-repeat;
    float: left;
    font-family: "Rock Salt", arial, sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
    line-height: .5em;
    letter-spacing: 3px;
    height: 67px;
    width: 438px;
    z-index: 100;
    margin-bottom: 0;
    color: #fff;
    padding-left: 60px;
    padding-top: 30px;
    }

    that all works fine BUT it seems to also be coming up in the middle of my image slider on the home page- as far as im aware, I disabled the #slider entry-title but it's still coming up- how can i get rid of that? (you can see my issue here:

    2. In addition to this how do I get the .entry-title to automatically resize -like the rest of the object on the page- when moving down to ipad and mobile sized screens.

    these are the only problems left before I can say this site is finished so i'd appreciate any advice that can put this issue to rest.

    thank you

  2. paul.a.cunn
    Member
    Posted 9 months ago #

    Can you repost a link to the issue. The current link is not correct.

  3. creativejunkie
    Member
    Posted 9 months ago #

    Oh I'm sorry don't know why that happened here

  4. paul.a.cunn
    Member
    Posted 9 months ago #

    So it looks like you added some css like the following.

    #slider .entry-title {
    display: none;
    }

    From what I can tell this is being overridden by other css. In order to fix this issue try changing it to the following. The "important" attribute should help fix overriding issue.

    #slider .entry-title {
    display: none !important;
    }
  5. creativejunkie
    Member
    Posted 9 months ago #

    Ok great ill give that a try, and what about the sizing issue of the bg image any tips for that problem?

  6. paul.a.cunn
    Member
    Posted 9 months ago #

    So usually to get an image to be flexible you just use the "max-width" attribute, but since this is a background image I'm not sure how it will work. Let's give the following a try. Please add this css then let me know when it has been added so I can see where/how its interacting.

    .entry-title {
    max-width: 60%;
    }
  7. creativejunkie
    Member
    Posted 9 months ago #

    Paul-

    Thank you so much the 'important' tag worked a treat.

    i've added the max width to the entry title,its working but not completely -as the whole image is not shrinking it is just being cut- take a look and you see what i mean

  8. paul.a.cunn
    Member
    Posted 9 months ago #

    Keep the max-width attribute, this is actually making the "entry-title" flexible but your right that the image is still not flexible. In order to make this part flexible add the following. The "100%" will make the width adaptable to the entry-title container. The 67px will keep the height at 67px. You can play around with these and get the best look. Please note that now when the page shrinks the image will most likely be stretched/skewed so the aspect ratio will be a little wierd. This only affects the little tack thats part of the image. Both can be changed to be percents or pixels.

    .page .entry-title {
    background-size: 100% 67px;
    }
  9. paul.a.cunn
    Member
    Posted 9 months ago #

    Also consider changing the 60% of the max-width attribute to like 75%. I think it looks better this way!

  10. creativejunkie
    Member
    Posted 9 months ago #

    absolutely beautiful- thank you - wipes forehead

Reply

You must log in to post.

About this Theme

About this Topic