Good day!

I am a supporter LightMart, and used it for my web portal (www.mummytoon.com). I realized the layout is off when I tried to view the website using my android smartphone which has a 5-inch screen. Is there a way to customize the layout for mobile devices?

Also, I would like to use the side menu for the mobile device. Instead, the drop-down menu for the mobile device points to my top menu. Is there a way I can choose the menu that is pointed to?

best regards,
Jason

Hi,

While adding the responsiveness layout to a website; the screen size (5-inch, 4 or 3 inch) doesn't really matters. What matter is what the resolution is the device is using.

iPhone screen sizes are relatively small but their resolution is extremely high (because of the retina screen)
Normally, our templates have screen resolution standards.

The responsive starts being active if the resolution drops below 768px (width)

(Which is the landscape iPhone width size and portrait iPad)

Please also browse our DEMO with your smartphone:
demo.flexiblewebdesign.com/lightmart/

Compare our DEMO and your website (in terms of responsive layout)
And check if the same issues you are talking about are also exist in our DEMO page as well.

I did notice some weird CSS rules in your website, (style in-line CSS rules). They are:
Did you add them by yourself on purpose? Because the fixed rules about #maininner , #sidebar-a and #sidebar-a are completely destroying the responsive layout. They shouldn't be exist. Or at least, they should be deactivated when screen resolution is lower than 768px

You should enter the CSS rules to optimize the responsive layout to this CSS file:
/templates/flexible_lightmart/css/responsive.css

Look at the already presented CSS rules, they will give you some idea. Furthermore, you may search it on google and read some tutorials about it. (search: CSS MEDIA QUERIES in google.com) You will find millions of articles about it.

Regards,
Support

Hi Support,

No, I did not add them on purpose. Should I delete the fixed rules?

#sidebar-a { width: 20%; }
#sidebar-b { width: 20%; }
#maininner { width: 60%; }
#maininner { left: 20%; }
#sidebar-a { left: -60%; }

best regards,
Jason

Hi,

Some of them are necessary, they should be exist. Don't delete them. (you can't delete them easily though, they are dynamically created by our template through complex methods)

but these rules look suspicious to me:
#maininner { left: 20%; }
and
#sidebar-a { left: -60%; }

maybe because you are both using "sidebar-a" and "sidebar-b" at the same time. But if you are saying "you didn't add them specifically" then it means, they are there because of our template.

Try this:.
open this CSS file:
/templates/flexible_lightmart/css/responsive.css

Scroll to the bottom and include this CSS rule:
Your website should look much nicer with mobile devices.
For more info about CSS Media Queries, read this document, it will give you some idea:
webdesignerwall.com/tutorials/css3-media-queries

Regards,
Support

Thanks for the great advice. The website does look much nicer with mobile devices. Need to read up more on CSS Media Queries to improve further.

Hi,

I am glad my patch make things look little better and nicer.
I am closing this topic for clearance.

Regards,
support