Ignis 'Boxed layout' issue

As per, kharisblank on my old topic.

I achived boxed payout using follwoing CSS code. But there is an issue on mobile view mode. All images appeared larger and I need to scroll left to view the remaining portion of the image.

.site,
.content-area {
  margin-left: auto;
  margin-right: auto;
}

.portfolio-wrapper {
  max-width: 100%;
}

@media only screen and (min-width:768px) {
  .site,
  .content-area {
    max-width: 720px;
  }
}

@media only screen and (min-width:992px) {
  .site,
  .content-area {
    max-width: 960px;
  }
}

@media only screen and (min-width:1200px) {
  .site,
  .content-area {
    max-width: 1140px;
  }
}

Homepage looks fine in the boxed layout.

But bio page looks different. How to make all pages to fit to width 1140px like the homepage.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .content-area.col-md-10.nosidebar {
      width: 100%;
    }

Regards,
Kharis

Hello, Kharis.

This CSS code indeed fixed the layout issue.
But if you open this page on mobile view mode, all images look larger. Like the homepage appeared properly on mobile.

Can you please check on this.

Hello there,

How does it exactly look like on your real mobile device? To help get the same look as what you’re seeing, please take a screenshot of it and post it in your reply comment.

Regards,
Kharis

Yes, Sure.

Please check this screenshot. https://drive.google.com/open?id=1LXZ8aQY1eHHamTodvPNEEjkxG__lEH5J

Hello there,

It looks like there’s a fixed width applied that’s causing you responsive issue.

.container {
    width: 1140px;
}

Try removing that code from your custom CSS code.

Let me know how it goes.

Regards,
Kharis

Hello, Kharis. :slight_smile:

I removed the following CSS code.

.container {
    width: 1140px;
}

But now my page contents aligned a bit left side. Please take a look at these screenshots.

Before: https://drive.google.com/open?id=1gGEbI4hUN4lfqgKjSeozQdfFHlvjYc4G
After: https://drive.google.com/open?id=1ga8UiMJduIf4a1o1Kd2sQIZAx-nL7pFm

Now what should I do?

Hello there,

Try adding this CSS code:

    .content-area.col-md-10.nosidebar {
      margin-left: auto;
      margin-right: auto;
    }

Regards,
Kharis

Hello!
Now everything has been solved.
I made these following small changes in the box-layout CSS code. Now everything is solved.

.site,
.content-area {
    margin-left: auto;
    margin-right: auto;
}

.portfolio-wrapper {
    max-width: 100%;
}

    @media only screen and (min-width:768px) {
     .site,
      .container,
     .content-area {
    max-width: 768px;
    width: auto;
      }
    }

    @media only screen and (min-width:992px) {
      .site,
      .container,
      .content-area {
     max-width: 992px;
     width: auto;
      }
    }

    @media only screen and (min-width:1200px) {
      .site,
      .container,
      .content-area {
        max-width: 1140px;
      }
    }

Great! You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

1 Like