Resize content in :AFTER

Bortas
Bortas
edited February 2015 in Campaign Portal Building
I'm trying to add a separator image after a heading, that part I was successful with, but I want the size to automatically scale up/down as the page is resized.

@h2:after{
content: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png');
clear: right;
display: block;
} /* Swirly divider after H2 header */@

Try making your browser smaller; the divider stays the same size, and pushed other content out of the way. "An example":https://morwindl.obsidianportal.com/wikis/main-page Additionally, if you are just on my "front page":http://morwindl.obsidianportal.com and the stream on the right.... horrible!

Any ideas? Thanks,

-bort
"Morwindl":http://morwindl.obsidianportal.com

Comments

  • ikabodo
    ikabodo
    Posts: 39
    Instead of putting the image as content, perhaps try using background image?

    @
    h2:after{
    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png');
    background-repeat:no-repeat;
    background-size:100%;
    clear: right;
    display: block;
    } /* Swirly divider after H2 header */
    @

    You might need to set the height and width too...

    Oath of Crows

  • ikabodo
    ikabodo
    Posts: 39
    Also, is this in the right forum? Announcements?

    Oath of Crows

  • Bortas
    Bortas
    Posts: 645
    How embarrassing - no, not a site announcement!

    That was what I had originally tried, and it doesn't directly work (there is no content in the :after, therefor, nothing is displayed). I believe I could force a certain height, but.... that sort of defeats the purpose of scaling. (edit): no, I can force the height, but still not displaying the image.

    Thanks for trying!

    -bort
    "Morwindl":http://morwindl.obsidianportal.com
  • ikabodo
    ikabodo
    Posts: 39
    content:"";

    Then try the background thing above.
    :)

    Oath of Crows

  • Unknown
    Additionally, are you trying to ensure that all h2 are designed with the separator after them, or would you prefer it to specifically be following on the sidebar content? If you are just looking to adjust it on the sidebar then this might be a better selector:

    .campaign-public-layout #sidebar .section-header h2 {

    }

    That would make it so the content is only kicked in after the h2 on the sidebar. As for forcing the height and still having a responsive image, there is nothing wrong with that. The responsiveness of content comes at the width rather than the height typically (there are some exceptions to this, but they are uncommon I feel).

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • Bortas
    Bortas
    Posts: 645
    Alex: true on width, I suppose. And no, I'm trying to make the adjustment everywhere - it really should be responsive in all places.

    Currently using:
    @h2:after{
    background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png');
    background-repeat:no-repeat;
    background-size:100%;
    clear: right;
    display: block;
    content: "";
    /*
    content: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png');
    */
    } /* Swirly divider after H2 header */@

    And it displays nothing.

    -bort
  • Unknown
    edited February 2015
    You want to specify the height. Otherwise, as you noted, there is essentially nothing there. Give it a try and see what happens, if we need to we can look into making the height responsive as well but I don't think it will be much of a problem. I am thinking something along these lines, though I haven't tested it:

    h2:after {
    background-size:100%;
    background-repeat:no-repeat;
    background-width:100%;
    height:40px;
    content:"";
    background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png);
    clear: right;
    display: block;
    }

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
    Post edited by Unknown User on
  • Bortas
    Bortas
    Posts: 645
    Derp.... thank you! This is how I know I need to stop staring at this code for a while...

    -bort
    "Morwindl":http://morwindl.obsidianportal.com
  • Unknown
    Don't worry about it, just glad it worked out for you. I do some web development outside of OP so I have a bit of an easier time modifying things at times or gathering up what I need. Believe it or not, I am still not so great at CSS (at least in comparison to many), but I do have a few years of experience under my belt with it.

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • ikabodo
    ikabodo
    Posts: 39
    Did you get it to work? If not. Tell me and I might be able to test it out on my page.

    Oath of Crows

  • Bortas
    Bortas
    Posts: 645 edited February 2015
    Yes, mostly, thanks to you guys:
    h2 {
    font-weight:bold;
    color:#6d0808 !important;
    font-family:Gabriela, serif;
    text-align:center;
    font-size:200%;
    border-bottom:none !important;
    height:80px;
    } /* Bold Header, most commonly used on wiki/character pages */

    h2:after {
    background-size:80%;
    background-repeat:no-repeat;
    background-width:100%;
    background-position: center bottom;
    height:40px;
    content:"";
    background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png);
    display: block;
    } /* Swirly divider after H2 header, most commonly used on wiki/character pages */

    I tried a max-width:450px; but it tosses it to the left instead of centered, and I decided I was done playing with it ;-)

    -bort
    "Morwindl":http://morwindl.obsidianportal.com
    Post edited by Bortas on
Sign In or Register to comment.

The first Campaign of the Month for 2021 is Gaxim Plague!

Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions