Joomla Templates Club 406,261 posts

[Walt Kennedy Friend Walt KennedyJoin date: September 2014Posts: 63Downloads:159Uploads:11 Thanks: 17 Thanked: 12 times in 9 posts]

#1063384

Site: https://mlcproperties.com
Example page – https://mlcproperties.com/index.php/en/about-us/what-we-do/regular-inspections
For each article in the categories "About Us/Why Hire Us?" and "About Us/What We Do? I want to place image within the article and have text wrap with padding. The problem is that the text is too close to the image and I cannot change the padding.
I have tried to add a caption class and have installed JCE editor in hopes to achieve padding, and have attempted several edits to the template.css file as suggested in your forum – all to no avail. Text is still running right to the edge of the images.
Please tell me how to get some space between text and image in articles.
Thanks

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1063415

Hi
Add below code in custom.css file to add some padding for image in content

article-content img {
    padding-left: 10px;
}

Regards

[Walt Kennedy Friend Walt KennedyJoin date: September 2014Posts: 63Downloads:159Uploads:11 Thanks: 17 Thanked: 12 times in 9 posts]

#1063580

I could not find an existing custom.css file, so I assume you meant that I should create it. I created custom.css file in /templates/ja_builder/css/, cleared cache and still I have no padding.

Please have another look at the page at https://mlcproperties.com/index.php/en/about-us/what-we-do/regular-inspections – notice that the text almost touches the left edge of the image.

I appreciate your help, but do not understand why a custom.css file should be needed to correct a problem like this; reasonable padding for text wrap on images should be included out of the box!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1063736

Hi
When you edit the page. Click on settings > custom code > custom css block.Add this code in this block

.article-content img {
    padding-left: 10px;
}

publish page and check,

Regards

[Walt Kennedy Friend Walt KennedyJoin date: September 2014Posts: 63Downloads:159Uploads:11 Thanks: 17 Thanked: 12 times in 9 posts]

#1063980

I could not follow your instructions as there is no "settings > custom code > custom css block" link available when I am editing the page.
However, I have found a cleaner solution; I installed JCE editor and edited the image parameters using that editor.

Thanks, Walt

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1064058

Yes, that’s another way.
By adding the code you have not need to align image for each article page.

Regards

[Author]

Posts