Community Forums › Forums › Archived Forums › General Discussion › Not right on ipad
- This topic has 7 replies, 2 voices, and was last updated 9 years, 2 months ago by Tonya.
-
AuthorPosts
-
January 8, 2015 at 9:28 am #136384jdevonMember
Hello. I'm using the magazine theme.
On my ipad, my posts are too far to the left so they are being obscured by the social buttons.
Does anyone have any ideas to how I can shift it to the right. It seems fine on my desktop.thanks
http://jeremysmithsblog.com
JeremyJanuary 9, 2015 at 4:18 pm #136792TonyaMemberHey Jeremy,
The problem is not limited to the iPad. Take a look at your site here to see how it looks on all mobile devices:
http://responsive.nutsandboltsmedia.com/?url=http%3A%2F%2Fjeremysmithsblog.com%2F.I've not used this particular plugin. Within the settings, is there a setting to allow you to specify when the mobile settings kick in? If no, a few options are:
1) Change the default location to the bottom instead of the left side, as then it will be fine for all mobile devices too.
2) Hide it via stylesheet for widths down to 480px. Let me know if you want this option so I can give you the css.
3) Hide it on all mobile devices (as it take up a lot of real estate on the smaller devices)Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampJanuary 11, 2015 at 8:18 pm #137116jdevonMemberHi Tonya an all
Thanks for answering my question.
I've put the Digg Digg bar on now to see how that looks, and that's still not right. I think I need to push the content right a bit.
Even with no social bar the content looks too far left on my ipad.Anyideas
thanks
JeremyJanuary 15, 2015 at 2:11 am #137516jdevonMemberStill looking for help on this please.
Thanks
JeremyJanuary 22, 2015 at 1:33 am #138245jdevonMemberStill wanting help. Bit frustrated that support can't help me on this.
January 22, 2015 at 6:42 am #138253TonyaMemberHello Jeremy,
I do apologize. I just received your last email early this morning, but hadn't received any of your others. Odd.
To adjust the width, the easiest approach is to adjust the max-width in the media-queries of your style.css file. For example, on the iPad, you would go to line 1822 and adjust the max-width down to say 860px, as follows:
@media only screen and (max-width: 1139px) { .site-inner, .wrap { max-width: 860px; /* was 960px; */ }
You would then need to repeat this reduction of max-width on the other mobile devices, until the social media plugin switches into mobile mode, which I believe is 480px.
For iPad in portrait mode, you go down the file to line1867 :
@media only screen and (max-width: 1023px) { .site-inner, .wrap { max-width: 650px; /* was 750px; */ }
and then just continue moving down through the media queries.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampJanuary 22, 2015 at 8:55 am #138256jdevonMemberHey Tonya
Thank you so much. That's fixed for my iPad. 🙂I changed those two settings but there's only one other one and that's 768px, but there is no max-width setting for this one. Should I do something with this one?
Thanks again
JeremyJanuary 22, 2015 at 12:51 pm #138287TonyaMemberYes, you add it for 768px.
@media only screen and (max-width: 768px) { .site-inner, .wrap { max-width: 80%; }
Then you will need to adjust when you get to 480px. Typically I put the max-width on the smaller devices to 95%. This would go at the end of the style.css file.
@media only screen and (max-width: 480px) { .site-inner, .wrap { max-width: 95%; } }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.