Media Queries
-
I need help in finding responsive solutions for the media like Iphone and Ipad because I have changed the text in certain areas in which they positioned different. Like on the home page where it says: “LEADING PROVIDER OF INNOVATIVE SHIPPING RECORDERS & IMPACT INDICATORS”
I want it on the right side instead of having it default in the center but I was told I need to use ” Media Queries” not sure how to use those…The blog I need help with is: (visible only to logged in users)
-
Hi! Check this page for a quick overview of responsive design and media queries:
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
In this case you might try:
@media all and (max-width: 320px) {
#home-banner #banner-text {
text-align: right
}
}
to have the text right-aligned on screens smaller than 320px. -
Looks like the code was jumbled. Here it is again:
@media all and (max-width: 320px) { #home-banner #banner-text {text-align: right}} -
-
Hi there, I’m seeing “Leading Provider…” is right aligned on your main page now, but I see it does become misaligned on certain screen sizes. First off, since the area behind the text is nearly white, I would suggest possibly adding a text shadow to it so that it shows up better. In the #home-banner #banner-text .main h2 rule in your custom CSS, add the !important attribute to the font size to override the existing and then add a text shadow declaration so things look like this.
#home-banner #banner-text .main h2 { font-family: 'open sans',sans-serif; font-size: 24pt !important; text-shadow: 1px 1px 2px #000000; }Add the following to the very end of your custom CSS and it should correct the issue on phones and other small devices.
@media screen and (max-width: 424px) { #home-banner #banner-text { max-width: 290px !important; } } -
-
- The topic ‘Media Queries’ is closed to new replies.
WordPress.com Forums 