Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive Widget Help
Tagged: responsive
- This topic has 6 replies, 3 voices, and was last updated 10 years, 7 months ago by lvvvvvl.
-
AuthorPosts
-
August 5, 2013 at 7:24 pm #54309lvvvvvlParticipant
I just finished adding and styling a test widget to my Executive Header theme right next to the logo. It looks fine on desktops but when I view it from my phone, the text widget is too aligned to the left and the first words of the paragraph can't be read. How do I go about centering this text in smartphone devices?
I tried calling that text widget using the following media queries but none of the styles I write seem to change anything, so I don't know if I'm using the right class/id hooks:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#header #text-22 .involution {
float: center;
}
}My blog url is this:
http://goo.gl/1KbHb
http://goo.gl/1KbHbAugust 5, 2013 at 9:02 pm #54323AnitaKeymasterIt's because your header/logo image is not responding properly. Try adding the Genesis Responsive Header plugin for the logo image - http://designsbynickthegeek.com/plugins/genesis-responsive-header.
Love coffee, chocolate and my Bella!
August 5, 2013 at 9:47 pm #54328lvvvvvlParticipantThanks for the response. I've added the plugin and created a 480x image for my site, the logo looks better but the problem with the text widget still remains, you can't read the first words of every sentence. Is there anything else I can do?
August 7, 2013 at 8:58 am #54554lvvvvvlParticipantStill trying to fix this...does anyone have any other suggestions?
August 7, 2013 at 9:13 am #54562AnitaKeymasterDid you copy the Text-22 CSS code down into the media queries/responsive design area? I cannot target your code specifically because you have Minify activated. But take your code for that text box, copy down and make your adjustments in the 480 area.
Love coffee, chocolate and my Bella!
August 7, 2013 at 10:24 am #54588SpankaMemberHey ivvvvl - you've got a few issues, but nothing major!
#header #text-22 { background: url("/wp-content/uploads/2013/08/topquote.png") no-repeat scroll 31px 16px #FFFFFF; float: right; height: 100px; max-width: 100%; width: 600px; }
1. The height is gonna kill you. If you want to squeeze something to 1/10th the width, it gets taller - let it go natural height and remove that height declaration 🙂
2. See the max-width declaration? 600px is fine for a width, but most phones are 480px wide - which is why you couldn't see the left side (it was floated right, so when you shrink, left side vanishes). Max width controls its upper width - perfect declaration for mobile work. Basically, be 600px when you can be, but if 100% < 600px, scale down!
3. Your text is specifically formatted for wide view and that probably isn't going to scale hugely well - it might, but I cant see it! If it does, great. If it doesn't...
#header #text-22 .involution { color: #3B053A; font-family: 'Cinzel',serif; font-size: x-small; letter-spacing: 2px; line-height: 140%; padding: 10px; text-align: center; text-indent: 50px; }
Equalize padding left & right for balance. Center the text. Remove the text-indent. All about balance. But if that's not something you find desirable, you could just drop your padding back to 10px 20px (or similar) and modify your background-image in #header #text-22 - get rid of the 31px left offset - that's pushing the curly quotes beneath the text.
3. it's floating right - cool - but that's gonna look odd if you scale down your browser - remember: it's not just a case of desktop and iPhone - it's everything in between. You might consider something like this:
#header .widget-area { background: none repeat scroll 0 0 #FFFFFF; max-width: 100%; padding: 0 0 20px; }
The colour isn't right, but that's easy to fix. Max width just to be safe (if you're dealing with responsive sites, nearly every image/structural block should have this!). But really, this just turns your 2 separate blocks (logo & quote) into a single white-backed header.
August 7, 2013 at 9:37 pm #54815lvvvvvlParticipantThanks a lot Spanka! I applied everything you said and it looks great on both desktop and phone!
Very thorough 😀
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.