Smart Responsive Design Page Width Display

[Mantra]

Has anyone any suggestion as to how I can reduce the page width so that the blank sidebars to the left and right sides of the display do not show?

Could this be something to do with the logo image being wider than the default logo image in the Smart Responsive design?

Martin
https://shop.mantra-audio.co.uk

[Goz]

I've just looked at your site to take a look..... have you turned off the right-click functionality?

[Mantra]

Yes, I have but will restore it temporarily and let you know when this has been done.

[Mantra]

I have commented out the disable right mouse button click code in the responsive outer layout and you can take a look on the page link below:

https://shop.mantra-audio.co.uk/acat...14.html#SID=36

Uploading takes ages when I make a change like this that affect all 3000+ product pages so I may have to abhort the upload before it completes but the changed product pages will still be available to inspect temporarily.

The company logo image as is does not display well when viewed on a mobile device (iPhone) so I may have lost the responsive functionality by changing the size of this.

Rgds
Martin

[Goz]

If I understand what you want then there is a CSS element that is setting the width of bulk-area to 89.7%



This is controlled in the Current Stylesheet on the Design Tab.


If you go into the Current Stylesheet and search for bulk-area it will take you to line 247 (I'm doing this in a vanilla site - your line might be different).

You'll see in that declaration is "width:89.7%"

You can change that to "width:100%"

This will widen the main content to full width.


If, on the other hand, you want to reduce the width of the header and footer to match the main content then this is slightly more convoluted. You'd need to change the width on the subHeader header-area and footer-area classes to 89.7% and then centralise that content. I can work it out in the browser for the header but not the footer at the moment.... haven't got time to figure that out at the moment. I'll try later if this is the approach you want (or you might be able to sort in between time)


Hope that helps.

[Mantra]

Thank you Andrew for sifting this one out.
I have change the main page width to 100% at line 255 on my Current Stylesheet and also at Lines 43 and 194 that were set at 90%.
This has effectively removed the blank side bars in the header, mega menu bar and main body and the footer looks ok too, so no need to consider reducing any page widths.
Cannot recollect changing anything like this in the Current Stylesheet previously so assume the display with the blank side bars has been present since first upgrading to V16.
I have reduced the width of the logo to 310 pixels to match that of the Smart Responsive Design Corporate Logo template so hopefully this should display in better alignment when viewed on mobile devices.
Thanks again
Martin
Mantra Audio