Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive issues
- This topic has 12 replies, 3 voices, and was last updated 10 years ago by vickilou.
-
AuthorPosts
-
April 13, 2014 at 4:06 pm #100098vickilouMember
Hi all,
First of all, I'm a huge fan of studiopress. I've used genesis and child themes for a couple of years now and I can honestly say that I've had no problems at all.
I've built sites on various themes [for clients] and they all work fine across all browsers and devices.
As luck has it, this site is my own site and somethings gone wrong. Hands up, I know it's something I've done wrong [at some point which eludes me] and I'm desperate to correct the issue.
My site isn't looking great on iphone and other devices. I've played about with the #inner sizes and the featured areas now display and can be scrolled across. But the header and right hand nav [header-right] don't show fully. The widgeted footer is also off.. hope it's something simple. I just launched assuming it would look fine on devices [as the other sites do], but I built it on copyblogger this time instead of serenity.
Any input is greatly appreciated.
Thanks in advance,
http://fabwebcontent.com
Vicki.April 13, 2014 at 9:02 pm #100120AnitaKeymasterYou added a customized home page. You need to add those elements to the media queries.
Love coffee, chocolate and my Bella!
April 14, 2014 at 1:33 am #100134vickilouMemberThank you for your reply anitac,
Could you please elaborate. I know I need to add something but I've struggled to figure it out.
Thanks.
April 14, 2014 at 3:33 am #100141vickilouMemberIf anyone can offer support on this issue I would be really grateful.
Please understand that, for me, design has been a very steep learning curve. I've not asked for help before as the answers are usually somewhere in the archives. But this issue - though perhaps obvious to some, leaves me totally stuck.
I'm on UK time ; )
April 15, 2014 at 8:20 am #100399Lauren @ OnceCoupledMemberHey Vicki,
Are you using your browser's inspector to try and find which elements need resizing? Just right click on an element that has a problem and choose "inspect". When you resize your browser, the styles will update after hitting a width that triggers a media query. Then you can get an idea of how your elements are changing and which elements aren't changing, that should be.
For instance, when my browser is at 971px wide, your menu drops below the correct area, because it is too wide to site next to your header.
At 960px the media query is triggered, fixing that menu and centering it under your header area now.
But at 600px it disappears, so I know it's from some change in your "@media only screen and (max-width: 600px)" block.Try investigating that and asking new questions with a more specific title. Since these are CSS specific questions, you could ask for help on other forums, as well. 🙂
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 15, 2014 at 1:13 pm #100566vickilouMemberThanks for taking time to reply Lauren.
@media only screen? I don't really know what that means.To be honest, I just cannot figure out exactly what's gone wrong. I compared the code to other sites and there's no obvious difference [to me at least]. Except that I built this one on copyblogger.
I was hoping it was going to be something straightforward that I'd missed and that someone would say 'you need to add this, or delete that.. I use the inspector [firefox], but like I said, with no obvious differences - it's left me stuck.
Sorry if I'm missing something.
Best,
VickiApril 15, 2014 at 1:39 pm #100570Lauren @ OnceCoupledMemberThe @media queries at the bottom of your CSS control how your layout resizes when the screen width decreases. Unfortunately it isn't an easy fix, there are probably a number of changes that need to be made in that area.
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 15, 2014 at 3:11 pm #100577AnitaKeymasterThe media queries are in your style sheet down below the heading "Responsive Design". Since you customized your home page, the elements (i.e., newly created featured content areas), need to be added to the media queries section. It is a bit of a challenge as you need to test each of those sections one by one. It's not easy to "tell you" how to do it because it requires "hands on" coding and testing for your theme only. Everyone will have a different set of needs.
Love coffee, chocolate and my Bella!
April 16, 2014 at 2:52 am #100646vickilouMemberOK Ladies, I understand. Ugh.. The irony (I have no intentions of touching another design project - this was/is my last, it's just sad that my own has gone wrong).
Anitac, I would use your services but circumstances wont allow - I would have paid someone to do this ages ago if I could. I understand what your saying re testing each section and I'm sure once I'm in the right place I will figure it out. Thanks.
I'm trying to decide if it will be easier to just to start again using serenity..I've got 3 sites using the theme and all are heavily customized and work/respond absolutely fine.
Kind regards.
April 16, 2014 at 3:50 am #100650vickilouMemberAlso, re @media - I had never noticed it before, thank you so much for pointing it out to me Lauren.
I honestly thought I'd retired from design and the relief was immense..100% focus for writing [not].
Best.
April 16, 2014 at 6:45 am #100660AnitaKeymaster@vickilou, I mentioned media queries when I first responded to you at the very top.
You added a customized home page. You need to add those elements to the media queries.
Love coffee, chocolate and my Bella!
April 16, 2014 at 7:03 am #100662vickilouMemberYes, I had no idea what you meant (blush).
As I said, I've not experienced these problems before, so I never looked that far down the style sheet, nor do i remember seeing it on there. But once I found it, I had a 'ahhh' moment. I'm more of a creative person and code is a bit like a necessary evil when it comes to getting whats in my head onto the screen.
Thank you for your help and I hope you didn't headbutt your desk too many times.
Kind regards,
Vicki.April 16, 2014 at 7:12 am #100668vickilouMemberThis reply has been marked as private. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.