Blank space on the right on Responsive layout

Reports about issues that you encounter in Suffusion. This forum is closed with effect from February 2019. Please post future requests on https://github.com/sayontan/suffusion.
Forum rules
This forum is being officially closed with effect from 3rd February 2019. Future support requests can be posted on the GitHub page at https://github.com/sayontan/suffusion/issues.
Colin
Posts: 5066
Joined: 27 Oct 2009, 10:46

Re: Blank space on the right on Responsive layout

Post by Colin » 17 Feb 2015, 12:38

All of those pages require a login so are not visible to us.

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: Blank space on the right on Responsive layout

Post by drake » 17 Feb 2015, 18:02

On "PB Franchise" pages you use a specific template - 1L Sidebar. Need to remove the minimum width for this template too:

Code: Select all

.page-template-1l-sidebar-php #nav-top .col-control, .page-template-1l-sidebar-php #top-bar-right-spanel .col-control, .page-template-1l-sidebar-php #header-container .col-control {min-width:0;}

mpark6233
Posts: 8
Joined: 13 Feb 2015, 12:31

Re: Blank space on the right on Responsive layout

Post by mpark6233 » 19 Feb 2015, 11:31

Ahhh.. that solved the problem.

I just can't thank you guys enough for the fix. You guys are genius.

Btw, what's the logic behind adding an additional css class ".page-template-1l-sidebar-php"?

If min-width:0 was already applied to the class ".col-control" descendant of IDs "#header-container" and "#nav-top" as instructed from suffusion forum with the following code:

#header-container, #header-container .col-control, #nav-top, #nav-top .col-control, #nav, #nav .col-control, #wrapper, #page-footer, #page-footer .col-control {
min-width:0;
}

Shouldn't have min-width of 0 applied to ALL elements using the class ".col-control" descendant of those IDs already in the first place? Why was adding an overqualifying class selector necessary in this case? :?

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: Blank space on the right on Responsive layout

Post by drake » 19 Feb 2015, 19:50

Because of specificity. A definition for a class is in effect unless a new definition for a more specific selector is reached.

mpark6233
Posts: 8
Joined: 13 Feb 2015, 12:31

Re: Blank space on the right on Responsive layout

Post by mpark6233 » 09 Apr 2015, 17:08

Hello Drake,

I am working on a new project and I have encountered similar issue again having blank white space on the right of all pages.

I have applied all methods I used previously to fix the white space on my last project and still didn't fix it.

Here is the address to the site I am working on: http://181.224.137.158/~parisba2/

Also, I have another issue on mobile responsive view that list bullets appears next to each of my store location and shopping cart icons (Home Page Header Icons) and disappear shortly after once the load is finished. The list-style:none is applied for both icon lists. Other browser seems to be okay but only chrome browser seems to show this problem. any idea on how to fix this?



Thanks in advance!

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: Blank space on the right on Responsive layout

Post by drake » 09 Apr 2015, 17:42

For solving the responsivity problem add at Suffusion Options -> Backend -> Custom Includes -> Custom Styles:

Code: Select all

#nav-top, #page-footer {padding:0;}
For the other problem I don't have a solution as I cannot see the issue on my computer. I don't understand about what bullets you talking and where they appear? The bullets appear instead of Store Locator icon and lately is replaced with the icon?

Such problems can appear because of plugins. The plugin which generate that icon can defer it's codes until all other elements of the page are loaded. Also, any other plugin can interfere with the javascripts of the site, delaying the loading of bullets or other elements.

mpark6233
Posts: 8
Joined: 13 Feb 2015, 12:31

Re: Blank space on the right on Responsive layout

Post by mpark6233 » 09 Apr 2015, 17:56

Thanks for a fast reply.

But unfortunately that didn't solve the problem.

I still see blank white space to the right of the screen. I did try your method previously because posting display:none on footer seemed to temporarily fix the issue, but the problem came right back.

For bullet issue, is it possible to put list-style:none on suffusion element and not on the plugin element? wouldn't that load the list-style first instead of being applied after the plugin is loaded?

Thanks!
Last edited by mpark6233 on 09 Apr 2015, 20:21, edited 1 time in total.

mpark6233
Posts: 8
Joined: 13 Feb 2015, 12:31

Re: Blank space on the right on Responsive layout

Post by mpark6233 » 09 Apr 2015, 18:02

Ah nevermind,

I just checked on my mobile device and it seemed to fix the issue. But, I am still seeing blank space on width between 980px to 1330px. I applied your fix to the main css but seem to only apply for width smaller than 980px. wierd..

Let me play around with the setting a little bit more just to make sure..

drake
Posts: 6223
Joined: 26 Jul 2011, 07:56
Location: Constanta, Romania
Contact:

Re: Blank space on the right on Responsive layout

Post by drake » 09 Apr 2015, 19:04

Add also at Custom Styles:

Code: Select all

#wrapper {width:98%;}

kcaluwae
Posts: 4
Joined: 25 Jun 2015, 01:20

Re: Blank space on the right on Responsive layout

Post by kcaluwae » 25 Jun 2015, 01:35

Despite implementing different solutions/tips I found on this forum I still didn't manage to clear the whitespace on the right side of my main page.

Main page : http://rewardingtravels.eu/blog/
I was hoping to empty the white space on the right and align the featured content more to the center.
This page is implemented with the template "no sidebar".

Main template is 1 sidebar left and is used for all the posts.
Here I have just a small issue that the content is just a little bit over the edge on the right.

I activated responsive layouts, and have fluid width for both sidebar 1 and default sidebar layout. I use theme based sizes/margins.

I tried implementing custom sizes/margins with fixed width (bot constructed from individual components and not) but then it seems worse and responsive layouts are necessary I suppose as I want to have a good looking site on tablets/mobiles.

Thanks for helping me out.

Locked