-1

At the moment, I have a span on a wordpress website I'm working on that appears in a funny place by default for each of the portfolio entries.

It is easiest to illustrate with pictures.

What I want to do:

The top two squares show how wordpress portfolio-type span is defaulting to and the bottom two squares are how I want to display the portfolio-type. enter image description here

Here's the code I'm attempting to use to fix this issue, followed by images that imitate the result. I have provided sources for my solution below the images:

/*Hard-code parent position relative to itself so that we can position its children absolutely across the board*/

  .tmb.tmb-iso-w4.tmb-iso-h4.tmb-light.tmb-overlay-text-anim.tmb-reveal-bottom.tmb-overlay-anim.tmb-content-left.tmb-text-space-reduced.tmb-image-anim.grid-cat-97.tmb-id-69092.tmb-img-ratio.tmb-content-under.tmb-media-first.tmb-no-bg
 {
    position: relative;
    left: 0px;
    top: 0px;
}

/*Change the span to block to change width. Input nbsp to content to try and remove empty space at the end of the word*/

span.portfolio-type{
    content: "\7C\a0\a0";   
    display:block;
    position: absolute;
    width: 40px;
    left: 10%;
    top: 100%;
}

Here's the result. Positioning... working! Width... Changed significantly!: enter image description here

As you see in the inspection, the width is the issue:

enter image description here

I have tried changing height and it works!! So clearly it's a width issue, but I'm not sure why. As this portfolio-type feature is something inside wordpress, I can only really alter is using CSS.

Solutions I have drawn from:

The parent/child format (so I can ensure that ALL of the same span are in the same position) comes from the solution Stephen Denken provided here: Position an HTML element relative to its container using CSS

The change to block comes from: Does height and width not apply to span? - There are a number of topics on this subject

Then the attempt to change to nbsp comes from: nbsp not working in CSS content tag

EidahageFeroe
  • 51
  • 7

1 Answers1

1

I use inspection mode and remove width from ".tmb .t-entry-text .t-entry-text-tc .t-entry>*:not(hr):last-child", remove width from "span.portfolio-type" and change left : 10% to right : 0.

span.portfolio-type{
    content: "\7C\a0\a0";   
    display:block;
    position: absolute;
    //width: 40px;
    //left: 10%;
    right: 0;
    top: 100%;
}

Please try this and let me know ^^

beginnerprogrammer
  • 498
  • 4
  • 14
  • Hi there! Thanks for the suggestion. Just for clarification, is the class name you're referring to literally spelled like ".tmb .t-entry-text .t-entry-text-tc .t-entry>*:not(hr):last-child" ? Then is it a matter of going 'width:0' for that element in the css editor? I wrote the code you've suggested in the editor and that didn't quite fix it, but that's because I haven't fully understood your first suggestions. Must be close though! – EidahageFeroe May 28 '18 at 01:59
  • Ok so your suggestion fixed the width! Thank you very much :). I did just copy and paste that very strage class name and went 'width: 40px' and got the size I wanted. Thank!! – EidahageFeroe May 28 '18 at 02:07
  • I just copy the class name from inspect mode ^^ You're welcome, you can also accept it as an answer~ Have a nice day – beginnerprogrammer May 28 '18 at 02:10