Responsive design using Catalyst theme WordPress
- SOLVED
Hi Guys
I've set up a site over at www2.naty.com and am looking for help with tweaking the responsive design.
With Catalyst it is pretty straight forward but I just need to re align some elements when they hit certain media query points.
Example: When the site responds to an iPhone 4 screen I need to remove and or realign certain elements in the header or footer.
Any advice greatly appreciated.
If you are up for doing it for me even better. We can discuss details
Many thanks
Steve
Answers (3)
Arnav Joy answers:
Hi Steve ,
I would like to help you for this , let me know what are things you want to customize?
Daniel Yoen answers:
Example responsive Structure :
@media (max-width: 800px) {
#div{
display:none;
}
}
@media (max-width: 650px) {
#div{
display:block;
}
}
@media (max-width: 450px) {
#div{
display:block;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#div{
display:none;
}
}
Daniel Yoen comments:
Or you can use Twitter Bootstrap
http://twitter.github.com/bootstrap/
Hope this help :-)
Dbranes answers:
Hi
you can test your responsive design for iphone/ipad media queries with fx these tools:
http://responsive.is/www2.naty.com
http://www.responsinator.com/?url=catalysttheme.com&scroll=ext
It looks like you need to make the header logo responsive.
Here is a video that shows how to use a smaller logo for the mobile devices:
[[LINK href="http://vimeo.com/39415070"]]http://vimeo.com/39415070[[/LINK]]
by using the handy "Catalyst > Dynamik Options > Responsive" setup, where one can choose between six Media Query Custom CSS boxes corresponding to iphone/ipad/...