Max page width?

It is easier said than done.

This theme is based on Bootstrap responsive grid system where all sizes are based on percentage to get 100% of the width. Most element size depends on container width wrapped around them. Content area width is set to 1170px and and the rest of elements are based on percentage.

Increasing container size would make sidebar bigger as well. Modifying one element width you might end up breaking some dozens more and so on.

There is no easy workaround and you should get your hands dirty to modify it.

Simplest method is to just increase width for the entire container but then sidebar will get bigger as well but this way you won’t break it entirely.

Like I said, this might sound easy but it isn’t

I have a wordpress site that is most likely only used by me.
If you have a business site or otherwise a site with many visitors, then this fix may not be so clever, since I havent tested it that much.
But it is working nicely for me atleast; both on a desktop computer and Galaxy S3 phone(I dont see any changes in the responsive layout).

So the changes i made:

themes/sparkling/header.php

Changed “container” to “container-fluid”:
Line 87:
From: <div class=”container main-content-area”>
To : <div class=”container-fluid main-content-area”>

Changed “col-md-8” to “col-md-10” so that the main content is wider
Line 89:
From: <div id=”content” class=”main-content-inner col-sm-12 col-md-8 <?php echo of_get_option( ‘site_layout’ ); ?>”>
To : <div id=”content” class=”main-content-inner col-sm-12 col-md-10 <?php echo of_get_option( ‘site_layout’ ); ?>”>

themes/sparkling/sidebar.php

Changed “col-md-4” to “col-md-2” so that the sidebar is narrower
Line 9:
From: <div id=”secondary” class=”widget-area col-sm-12 col-md-4″ role=”complementary”>
To : <div id=”secondary” class=”widget-area col-sm-12 col-md-2″ role=”complementary”>

You can ofcourse tune more of the other elements, but this was a fast and easy solution.

You can read more about Bootstrap grid system here:
https://getbootstrap.com/css/#grid

Thank you guys both, I rather decided to stay with current width as of now. ??

if changing the width of certain elements on the site is a function of the width of the entire page – how can one change the width of the entire page. I just did a search for “1170px” in my source code and found nothing of the sort. my website is marketingartgallery.com and my ads are currently cut off.

Let’s create a new thread for this https://www.ads-software.com/support/theme/sparkling#postform