Flexbox CSS

[Matt Bourne]

Hi

Quick question here

I need to place the yellow sticker inside the white box as in the image attached here

For now, I used the existing code as below which is not mobile friendly and outdated not like Flexbox etc

Code: Select all

span.type {
float: right;
margin-top: -211px;
}

Please help to suggest a better code to achieve a same result using Flexbox or something better

The yellow box should be placed somewhere in that top right area and a bit nudged from the top, and mobile friendly

That's all I need

Thank you so much for your help..

The live site is in the footer below

[Mr. Wimpy]

Okay, I'll asume this is about the boxes below the purple boxes...

This CSS moves .type over the image and positions it top right

Code: Select all

div.title {
  position: relatie;
}

.title .type {
  position: absolute;
  right: 0;
  top: 20px;
}

* The position on div.title is needed for position: absolute to work on .title .type.
** top and right is the location of the absolute position. You can use any number, including negatives.
*** To make coding easier use different classnames for different elements, not .title for div and a.

https://www.w3schools.com/Css/css_positioning.asp