Adjusting right/left margins in Mobile view
-
-
- Rowby Internet
- Sr. Rocketeer
- Posts: 104
- Thanks: 0
-
Hello,
On mobile devices the padding on the right and left of the main body of my test site needs to be reduced. (using Joomla 3.)
Here's a shortened url to the page: http://goo.gl/aRWcF Please take a look.
If you view the page on a mobile device, or start to minimize the page you will see the margins on the right and left.
Where in the template or gantry can I reduce the right and left "margins"? Only to apply to mobile widths -- (and if necessary as the page slowly becomes minimized, because of the nature, as I understand it of "responsive".)
The margins are fine when in desktop mode. But take up too much valuable real estate on cell phones.
Please look at this screen capture.
This image is hidden for guests.
Please log in or register to see it.
Thanks! - www.rowby.com
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
Looks like you have added some custom code to the custom css file...
Trouble with that code is that it is not specific enough and will affect every instance of .rt-block regardless of viewport..rt-block { margin: 10px 10px 1px; padding: 15px; position: relative; }
Try checking out the documentation here - www.gantry-framework.org/documentation - and you will see that you can make overrides but they need to be specific.
Hope this helps
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
-
-
-
- Rowby Internet
- Sr. Rocketeer
- Posts: 104
- Thanks: 0
-
Hi
I see here about creating overrides:
www.gantry-framework.org/documentation/j...e/template-overrides
But am not sure how to specifically create an override for a viewport -- such as phone or tablet.
Can you show me -- or point me -- to more specifics on how to override for viewports?
Thanks
Rowby - www.rowby.com
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi Rowby,
Try this link - www.gantry-framework.org/documentation/j...ser-specific-control
That should help. :cheesy:
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
-
-
-
- Rowby Internet
- Sr. Rocketeer
- Posts: 104
- Thanks: 0
-
Hi David,
That link is giving me some ideas...
So I would assume that I would dig into "platform" css for
iphone (both iphone/ipod),
ipad,
android,
mobile,
Still not sure how I would incorporate that into a platform specific Override, thought. It seems to be specific for style sheets.
Being able to have platform specific overrides is something that I would like to be able to do -- it would solve much of the issues I have been having.
So do I select a specific stylesheet (per that link) to be associated with, for example, a Ipad override?
I think your answer would be "Yes!" (or am I wrong?)
Rowby - www.rowby.com
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi Rowby,
The answer is yes. Create a style sheet for the viewport that is giving you the problem. This will not get overwritten on updates. Much easier to manage.
Hope this helps
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.050 seconds