Virtuemart Support :: Topic: Responsive Changes (1/1)

Welcome, Guest

TOPIC: Responsive Changes

Responsive Changes 11 years 3 months ago #2219

emmanuel Pleau

Hi,

I am waiting for you for my mods but i make a new thread on another thing interesting for all maybe :)

To have this theme a little more "responsive" for Iphone tablets etc ..."
I am trying to make this :

i have for example these classes :

.orderby-displaynumber {
 
	border: 1px solid #E5E5E5;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
    font-size: 11px;
    margin-top: 5px;
    padding: 5px 15px;
	background: none repeat scroll 0 0 #FAFAFA;
	  }
 
.orderby-displaynumber  {
font-family: 'Lucida', sans-serif;
	font-weight: 300;
	font-size:13px;
}
.orderby-displaynumber .title {
	font-size:13px;
	display:inline-block

In order to Hide this menu only for phones my original RT template have a class for module define like that :
www.rockettheme.com/blog/team/1551-responsive-design-rocketthemes-solution

Under firebu for my example class if i add manualy in the Css part of the DIV class call i just transform :

<div class="orderby-displaynumber">

TO

<div class="orderby-displaynumber hidden-phone">

And when the resolution is an iphone or phone it automatically disapear. perfect its what i want ...

But How modifying flexible css paste at the top to achieve that ???

Thanks...

I doesnt know if i have to edit the php ... i would prefer only modify the css but how and is it possible ??? in this way ?

The administrator has disabled public write access.

Responsive Changes 11 years 2 months ago #2228

Support

Hi,

Editing only CSS is enough for making the PureMart responsive since mobility layout is all about CSS.

For example, if you want to hide the "order display number element" which uses "orderby-displaynumber" class name, then you should add this Rule below to responsive.css (the specific CSS file that your Joomla Template loads when the website is browsed by mobile devices, the name of this CSS file can differ from joomla template to joomla template.)

.orderby-displaynumber {
display:none;
}

Since responsive.css only gets loaded if the website is opened with mobile devices, that CSS rule you just added to responsive.css won't be effective in regular browsing.

Anthony, thanks for pointing this out and sharing this info in case anyone will get benefit from it.

Regards.
Forum Support.

Last Edit: 11 years 2 months ago by Support.

The administrator has disabled public write access.