Pritam Sonone

Forum Replies Created

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

  • 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.

    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!

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