?
Solved

Responsive Design in shopify

Posted on 2014-02-05
4
Medium Priority
?
413 Views
Last Modified: 2014-02-06
Hi,

we are creating a shop using the default "launchpad" theme in shopify. We  have add a page item on the front page and used html to create two side by side divs.

Works great on a full screen but the responsive nature for that item doesn't work on an iphone.....

Our Question - what can we do to resolve this. site: http://www-helpinghandz-com.myshopify.com/

Additionally ( and if it should be another question let me know) We would like to move the social networking icons to the top bar by the cart icon. we know where the css is just not quite sure how to do it.

Thanks,
0
Comment
Question by:sio2y
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 39837852
it depends what you want the behavior to be as the window is resized. Do you wan the image and video to scale? Maybe you only want the image to scale?

First and foremost, do not write your styles inline. they belong in a stylesheet.

second, get rid of all the px based dimensions and use % instead. You can use max-width px values to limit thing from growing too large, and min-width to limit how small they get.

At certain screen widths you might want to use media queries. but use them sparingly. it's better to structure your CSS and HTML in such a way as to use less code, and hence less maintenance.
0
 

Author Comment

by:sio2y
ID: 39837863
Thank You. I'll see what I can do.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39838700
:)

come back and ask specific questions once you start playing around with it.
0
 

Author Comment

by:sio2y
ID: 39838740
...and no doubt I'll have a number of them.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month8 days, 11 hours left to enroll

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question