How to add background color to page and increase writing area

  • Hi all,

    Pls advise how to add color, e.g. – light green, to page

    Also how to increase writing area? I need to have 7~8 images per line. I’m using “Classic Editor”.

    Thanks in advance.

    Regards

    • This topic was modified 1 month, 4 weeks ago by satimis.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • To address your queries, here’s a step-by-step guide to add a background color and adjust the writing area for multiple images per line in your WordPress page using the Classic Editor:

    1. Add Background Color (e.g., Light Green) to a Specific Page:

    You can add custom CSS to apply a background color. Here’s how:

    • Go to the Classic Editor and switch to “Text” mode.
    • Add the following inline CSS at the beginning of the content or within the <body> tag:
    <div style="background-color: #90ee90; padding: 20px;">
      <!-- Your page content here -->
    </div>

    This will set the background color of the page to light green (#90ee90). You can replace the color code with any other color you prefer.

    2. Increase Writing Area for 7-8 Images per Line:

    To display multiple images (7-8 per line), you can use custom CSS to adjust the image layout. Here’s how you can do it:

    • Go to the Appearance > Customize > Additional CSS and add the following code:
    .custom-image-gallery img {
        width: 12%;  /* Adjust this width to fit 7-8 images in one line */
        margin: 5px; /* Adjust the margin if needed */
        float: left; /* Align the images side by side */
    }

    .custom-image-gallery::after {
        content: "";
        display: block;
        clear: both;
    }

    Then, in the Classic Editor (Text Mode), wrap your images inside a div with the class custom-image-gallery like this:

    <div class="custom-image-gallery">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        <!-- Add more images here -->
    </div>

    This will arrange your images in a row, and you can adjust the width percentage if needed to fit 7-8 images per line.

    3. Responsive Layout (Optional)

    If you want the images to be responsive and adjust based on screen size, you can add this CSS:

    @media only screen and (max-width: 600px) {
        .custom-image-gallery img {
            width: 45%;  /* Adjust width for smaller screens */
        }
    }

    This ensures that the images will adjust their size on smaller screens like mobile devices.

    Let me know if you need further assistance with this!

    Thread Starter satimis

    (@satimis)

    Hi@digitalpritam,

    Thanks for your detail advice.

    Your 1. Add Background Color …. works here.


    Re your 2. Increase Writing Area for 7-8 Images per Line: 

    I already have following content on "Additional CSS"
    >>>>>
    body {

    width: 100%;

    margin: 0;

    padding: 0;

    } page {

    max-width: 95%; }
    <<<<<

    Do I need to adjust it?

    Regards
    • This reply was modified 1 month, 4 weeks ago by satimis.

    I’m glad the background color solution worked for you!

    For the writing area adjustment (7-8 images per line), the CSS you currently have in “Additional CSS” does set some general rules for your page’s width. Let’s review and integrate these with the new image layout you’re trying to achieve.

    Your Current CSS:

    body {
      width: 100%;
      margin: 0;
      padding: 0;
    }

    page {
      max-width: 95%;
    }

    Recommendations:

    1. Adjusting the Page Width: Your current max-width: 95%; is good—it ensures the content uses most of the page width (95%). So you likely don’t need to adjust this unless you find your page too narrow.
    2. Image Layout: To fit 7-8 images per line, you can still add the specific CSS for the images from my previous example. The key here is to keep the width of the page at 95% and adjust only the width of the images.

    Add this to your existing CSS, below what you already have:

    .custom-image-gallery img {
        width: 12%;   /* Adjust this to fit 7-8 images per line */
        margin: 5px;  /* Space between images */
        float: left;  /* Aligns images side by side */
    }

    .custom-image-gallery::after {
        content: "";
        display: block;
        clear: both;
    }

    @media only screen and (max-width: 600px) {
        .custom-image-gallery img {
            width: 45%;  /* Adjust for smaller screens */
        }
    }

    This will fit 7-8 images in a row within the 95% width of your page. The percentage width for images (12%) is calculated so that 7-8 images can fit per line, considering margins and spacing.

    Thread Starter satimis

    (@satimis)

    Hi@digitalpritam

    Add your suggested coding in “Additional CSS”, just below my original coding

    -> Published

    It seems not much change on the page “Travels to Canada”

    Do I need adding following coding on “Classic Editor”?

    div class=”custom-image-gallery”
    Image 1
    Image 2
    Image 3

    ……….

    Besides there is a big white margin btw page and website background. How can I reduce its size? Thanks

    • This reply was modified 1 month, 4 weeks ago by satimis.
    • This reply was modified 1 month, 4 weeks ago by satimis.
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.