Recent
Categories
View Replies (7)

Metropolis Responsive Behaviors

0
Votes
Undo
  1. looneylynn
    looneylynn
  3. Commercial Templates
  4. Sunday, 16 March 2014
  5.  Subscribe via email
Hello,

When using the metropolis template in responsive mode on a mobile device I have a few issues I'm hoping are simple and you can help me with please:

1) There no icon or indicator that shows where to tap the screen to select the menu when in responsible view (this is very common on many other responsive/mobile templates i've used) . Is it possible to add this? The responsive menu looks like a breadcrumb view, as it has moved from the Hornav position, and it isn't obvious this is the actual menu now.
2) Why does the position where you tap to enable the menu selection move from the HORNAV position (above the logo) to just above the Breadcrumbs position (below the logo) - is it possible to keep the menu location (with addition of an icon) in the HORNAV position so it is consistent for users who visit both the full site and the mobile site?
3) The responsive menu text (below the logo) is not center aligned within the menu border area and thus the bottom of the text in that field is being cut off. Is there a way this can be addressed?
4) the standard Joomla contact form does not fit properly within the responsive view. The contact form fields are indented to the right and thus are cut-off by the metropolis template boarder.
5) the email and phone number fields in responsive view are not beside the icons, they are below the icons on the next line (in standard view the alignment is incorrect in this area as well).

I'm running Joomla 3.2.3.

thanks very much :)
Responses (7)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

We have recently updated the Joomla 3.x version of our Metrpolis template with an updated version of our mobile menu which may be more suitable to your needs. An example of this menu can be seen with our latest template release.. http://demo.joomla51.com/0109. Simply download the template again and install to upadate your template to the latest version.

Would you have a URL to an example of your contact form?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Geoff

We have added the following to the Custom CSS field of your templates parameters and your mobile menu and contact form are now responding correctly...


@media only screen and (max-width: 767px) {

.form-horizontal .control-label {

    float: none;

    text-align: left;

}

.form-actions {

    padding-left: 0;

    width: 300px;

}

.form-horizontal .controls {margin-left: 0px;}

.contact-form legend {width: 300px;}

}


Note that the reCaptcha plugin is not responsive however a compact option is available.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 2
looneylynn
looneylynn
Accepted Answer Pending Moderation
0
Votes
Undo
thank you.

Is this custom CSS going to be added as part of the standard template update for metropolis in the future or was "custom" because of some site specific issue? i want to make sure in the future if I need to install the template that the responsive menu etc. will work as expected.

I also still have some issues with alignment on the contact us page in normal view (non-responsive). There are extra tabs/spaces beside the address, email, and phone number fields.

You may also notice on the home page the boundary box around the 2 test items in the response view is not large enough to contain the button or the thumbnail image. With other templates using responsive design I have not had this issue. Is there something that can be adjusted in metropolis template to address this as well?

thanks,
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Yes this CSS will be added to the next update of the template. As it it will have no effect to your responsive menu.

Would you have a URL to an example of the spacing issue of your contacts page? If you would sooner not make the URL public please send us the link to info@joomla51.com. For our reference please paste a link to this post in your email.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

Regarding your Contact white space issue could you try also adding the following to the Custom CSS field of your templates parameters...


.contact dd {

    display: block;

}


To increase the padding within your Hikashop item try also adding the following where 30px is your new padding...


.hikashop_subcontainer {

    padding: 30px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
looneylynn
looneylynn
Accepted Answer Pending Moderation
0
Votes
Undo
Hello,

the contact field formatting in normal view is now fixed. thanks.

the "Send Email" button in responsive view (on the contacts page) still exceeds the templates boundaries.

The Hikashop formatting issue is not fixed. The new padding added to the custom CSS seems to have different effects if you are viewing in full site mode or responsive. In responsive the 2 columns start to overlap but it does not address the overlapping issue.


thanks,
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To further style your contact button try also adding the following to the Custom CSS field of your templates parameters...


.form-actions {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);

    border: medium none;

    overflow: hidden;

    width: 120px !important;

}


Your Hikashop issue wouldn't really be template related however you can try using something like the following for better viewing on smaller screen devices...


@media only screen and (max-width: 767px) {

.hikashop_product {width: 100% !important;}

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok