Space between text and image

How do I adjust the space between text and image?

I looks like you want the image above the text. Have you tried putting a <br> tag or a <p>&nbsp;</p> tag after the image tag?

What I want is to reduce the distance between the image and the text. The white space is too large.

The location of the article;

And picture is here;

In summary, how do I enlarge this picture to the right?

I sounds like you may have two separate goals.

  1. reducing the space between the image and text. This depends on the HTML and CSS involved. To help you, we’d need either the HTML and CSS for the image and text or (better) a link to the page.

  2. enlarging the image. You can edit the image to increase its size, but if there are height and width attributes in the tag, you’ll have to change them.


img{width:100%; max-width:100%; height:auto;}

That will make ALL images fit the width of the container/element they sit inside and maintain their apect ratio.

From here, you can check friend;

In which part, can i do this change in manager ?

Where can I adjust the CSS settings?

In the file _about.scss line149 you need to change 120 to a smaller number, that will also give you a bigger picture:

There are probably other places in that file that style the .about and .container classes, and there may be side effects to the change.

Since you’re using .scss, it’s likely that you’ll have to regenerate the .css file that’s being used for the page. Changing the SCSS file by itself won’t have any effect.

@media screen and (min-width: 1279.98px)

.about .container {

In the file, where is _about.scss file ?


In my codes like this

 * Axial
 * Axial Construct is a universal template for factories, industry, construction, architecture, factories, mechanics, energy
 * Exclusively on
 * @encoding        UTF-8
 * @version         2.0.0
 * @copyright       (C) 2018 - 2022 Merkulove ( ). All rights reserved.
 * @license         Envato License
 * @contributors    Lilith Lamber (
 * @support
// --- base ---
@import "base/base";
@import "base/mixins";
@import "base/variables";
@import "base/keyframes";
@import "global/global";
@import "global/rtl";

// --- page components ---
@import "blocks/common/header";
@import "blocks/about";
@import "pages/about/quote";
@import "pages/about/services";
@import "blocks/features-list";
@import "blocks/reviews";
@import "blocks/common/footer";

And there is a this part.

I don’t know. It’s your site.

It looks like the file that’s actually being used is:

You can try editing it, but it may be regenerated from the _about.scss file (I have no idea how). If that’s the case, your change will be overwritten.

You might look under the /assets/components/ajaxform directory for the _about.scss file. If you edit both files, you should be safe.

I made changes in the px below in single-post.css, but there was no change.

@media screen and (min-width: 1279.98px) {
  .about .container {
    gap: 120px; } }

Did you clear the MODX cache and your browser cache?

Are you testing with a viewport wider than 1279.98 px?

You may need to change the values for other “$media screen” viewport sizes. If you learn how to use Chrome Dev. tools, you can change the CSS manually while looking at the front end of your site and get the effect you want with the current viewport size. Dev tools will automatically jump to the correct part of the CSS file.