How to eliminate whitespace in mobile view?
-
-
- David McCreary
- Sr. Rocketeer
- Posts: 140
- Thanks: 4
- Webmaster
-
See attached. Site in build at
109.199.101.171/~etchellsukfleetc/
Joomla 3.6, Hydrogen 5.3.2, Gantry 5.3.2
1.png shows front page view
2.png shows phone view (confirmed problem with multiple physical devices)
3.png is layout for default template
4.png is chrome inspect
I have hidden-phone on slideshow, Page Content, Facebook Cowes, Facebook A B C module positions.
I've left Sidebar A without hidden-phone as I'll build what i need there for smartphone view.
THE PROBLEM: all the whitespace between the logo and first module in Sidebar A (sponsors of, etc). I want the modules in Sidebar A to be MUCH closer to the logo. Logo graphic is only 95px high.
Changing section settings for header doesn't solve it. it's as though the position doesn't completely collapse... even if nothing is in the position for the media width. I've applied no inheritances.
What am I missing here? How to make all the present margin/padding disappear when you apply hidden-phone?
THANKS for your time. The forum's worth every dime of a developer license
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi David,
I am guessing you have placed the hidden-phone class in the advanced tab on the module?
You might need to open the outline layout and add the class to the block.
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- David McCreary
- Sr. Rocketeer
- Posts: 140
- Thanks: 4
- Webmaster
-
Tried that... and several other options, without success. I'd like to keep just the sidebarA position visible to phones, all others in the section have hidden-phone.. but i tried your suggestion, applied hidden-phone to the section. Whitespace still there between logo and copyright / footer areas. Tried adding another row in both Main and Navigation sections and created module positions there with text content. Did not work.
I just don't understand why if a position has "hidden-phone" it does not completely collapse to zero. There are g-block size=30 pieces of whitespace remaining.. one can see that in chrome inspect. Is there a @media that can remove all padding, spacing from a module position if it's set to hidden-phone? This seems harder than it should be...
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
The hidden-phone on a module does hide the module. It doesn't hide the block because it is rendered after the block is created. This is why I said the block needs the class.
Can you use the 'secure' option above post input to provide me with a temporary Super Admin access please and I will take a look to see what the cause may be.
Thanks
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- David McCreary
- Sr. Rocketeer
- Posts: 140
- Thanks: 4
- Webmaster
-
This message contains only secure information that is visible to David McCreary, moderators and administrators
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi David,
Sorry for the delay but things have been rather hectic with people away on holidays!
On checking your layouts I can confirm that it was the header-b and header-c positions that did not have the 'hidden-phone' in the template block.
I have added them and all seems to be fine.
If this resolves your problem then please edit your first post in this thread by adding [SOLVED] at the start of the title and click on the icon and select the 'tick' icon. This lets the moderators know that it can be moved to the solved section.
Thanks for your cooperation
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
Time to create page: 0.064 seconds