Advertisement

Flexbox CSS

Everything to do with Joomla! 5.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
Matt Bourne
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 158
Joined: Mon Aug 12, 2013 2:33 pm

Flexbox CSS

Post by Matt Bourne » Mon Sep 02, 2024 8:51 am

Image

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
Handyman service at https://www.homeservices.my/

Advertisement
Mr. Wimpy
Joomla! Guru
Joomla! Guru
Posts: 552
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: Flexbox CSS

Post by Mr. Wimpy » Mon Sep 02, 2024 11:15 am

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

Advertisement

Post Reply

Return to “Templates for Joomla! 5.x”