Add spacing between text and image Topic is solved

General questions relating to Joomla! 4.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Post Reply
BKKJ
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri May 06, 2016 9:23 am

Add spacing between text and image

Post by BKKJ » Tue Oct 12, 2021 8:46 am

Hi

I am setting up a Joomla 4 website. I an enjoying using the default TinyMCE editor because it resizes the same image for an article and the intro text for the article. The problem is the image appears to be overlapping the text. See here: https://onlinetutors.in.th/index.php/ge ... ish/mike-b

I realise I can use JCE as an editor, but that requires placing 2 images of different sizes in the editor. So, I'd like to revamp the CSS to pad the image on the right and at the bottom on the text.

Does anyone know how to do this? Could you give me instructions?

I should say: I am an absolute CSS novice and general sweat profusely when I do anything with HTML or CSS, so please, give an idiots guide if you can.

Thanks in advance

BKKJ

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 452
Joined: Tue Jun 30, 2020 12:17 pm

Re: Add spacing between text and image

Post by Pavel-ww » Tue Oct 12, 2021 11:07 am

BKKJ wrote:
Tue Oct 12, 2021 8:46 am
I should say: I am an absolute CSS novice and general sweat profusely when I do anything with HTML or CSS, so please, give an idiots guide if you can.
Hi. Create user.css file in templates/cassiopea/css/ folder and place there following code

Code: Select all

.com-content-article .left.item-image {
	margin-right: 20px;
}
Will looks like this
1.jpg
You do not have the required permissions to view the files attached to this post.

BKKJ
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri May 06, 2016 9:23 am

Re: Add spacing between text and image

Post by BKKJ » Tue Oct 12, 2021 11:17 am

I will give it a shot and let you know how it goes. Cheers.

Will that code change the formatting when viewed through a mobile device?

BKKJ

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 452
Joined: Tue Jun 30, 2020 12:17 pm

Re: Add spacing between text and image

Post by Pavel-ww » Tue Oct 12, 2021 12:13 pm

BKKJ wrote:
Tue Oct 12, 2021 11:17 am
I will give it a shot and let you know how it goes. Cheers.

Will that code change the formatting when viewed through a mobile device?

BKKJ
This code adds an indent to the image to the right. Including on mobile devices

BKKJ
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri May 06, 2016 9:23 am

Re: Add spacing between text and image

Post by BKKJ » Wed Oct 13, 2021 2:15 pm

Hi Pavel

I added the code but unfortunately, it doesn't seem to be working:

https://onlinetutors.in.th/index.php/ge ... nglish/css

BKKJ

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 452
Joined: Tue Jun 30, 2020 12:17 pm

Re: Add spacing between text and image

Post by Pavel-ww » Wed Oct 13, 2021 3:18 pm

BKKJ wrote:
Wed Oct 13, 2021 2:15 pm
Hi Pavel

I added the code but unfortunately, it doesn't seem to be working:

https://onlinetutors.in.th/index.php/ge ... nglish/css

BKKJ
Hi. You were not attentive enough and created the file not in that folder. Pay attention to the path in my post above.
1.jpg
You do not have the required permissions to view the files attached to this post.

BKKJ
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri May 06, 2016 9:23 am

Re: Add spacing between text and image

Post by BKKJ » Wed Oct 13, 2021 3:39 pm

Noted

BKKJ
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Fri May 06, 2016 9:23 am

Re: Add spacing between text and image

Post by BKKJ » Thu Oct 14, 2021 10:26 am

Worked perfectly - thanks !!!!

BKKJ

https://onlinetutors.in.th/index.php/ge ... ish/mike-b

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 452
Joined: Tue Jun 30, 2020 12:17 pm

Re: Add spacing between text and image

Post by Pavel-ww » Thu Oct 14, 2021 2:25 pm

You are wellcome


Post Reply

Return to “General Questions/New to Joomla! 4.x”