not a support questionG'day,
When I display my page on my iPhone4 (OS 6) in Safari, when I have it on portrait orientation, the responsive layout results in the bottom 40% of the slider image being obscured by the Boxed Page Split Overlay.
Is it possible for the amount of overlay to be much smaller when viewed on an iPhone or mobile?
Thanks,
Jodie
Nick
Moderator
Hi,
Please add the following css block to the bottom of the /css/custom.css file; OR to Quick CSS located in the admin area of Incarnation > Theme Options > Styling ... the text area at the bottom of that page:
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
#top .slideshow_align_caption{
display:block;
down: 200px;
margin-bottom: -57px;
}
}Thanks,
Nick
Hey Nick,
Doesn't seem to work.
When I paste it in the Custom CSS bit, it wipes out the "down: 200px;" line, as if it is an error, and puts a "!" against it in the column.
Then, I tried pasting it in the Theme Options page, but it still didn't work.
Can you double-check the code?
Thanks so much!
Jodie.
Nick
Moderator
Hi,
The down:200 shouldn't be there. Though even if it is there it does no harm. But you can take that line out. The margin is the one that pushes the text down. Now you mentioned the iPhone. Which one? Because now there is such a big difference between all the versions, i want to make sure I am giving you the correct media query. (a) is there a difference with the code and without it? What needs to happen now, because from my end I can see all the text. Would be great if you can take a screen capture.
Now: http://www.clipular.com/c?2819260=_kQtwvwvhjMGULpqnhR4q1Q5r7I
Before : http://www.clipular.com/c?2514868=WDj6Ih0vWeHvwwKR_P_2RBqDKH8
Thanks,
NIck
Hey Nick,
Here's what worked for me (after some experimentation):
margin-bottom: -50px;
margin-left: -50px;
margin-right: -45px
and that seemed to work fine for the iPhone4, which I've got.
But... that's not the problem I actually was speaking about... but it was a different problem I was going to bring up next !!!
So, to fix the original problem, the issue is that when you go to oakflatsanglican.com/visitors on an iphone4, then you'll see that the bottom third of the photo of me and my wife is obscured by the white box that's got the text in it.
Is there any way to drop the box right down when it's viewed on an iphone4?
Cheers,
Jodie
Or...
If we were able to make the photos cropped differently with this iPhone responsive design, then that would fix it.
So, instead of being about 2cm tall, if the photo was 4cm tall then that would fix it... and would also make the text on top of it much better, too.
How might we do that?
Jodie
Nick
Moderator
Hi,
option 1) Take a look how it would look 50% transparent
#top .main_color.container_split.thisOverlap .container > .content, #top .main_color .template-overlap {
background-color: rgba(255, 255, 255, 0.5) !important;
}option 2) If semi-transparency is not your thing, then I would go for full transperancy while pushing the text lower a bit. I made this code specific only to this page (one with your wife and you), if you want the same to happen on other pages, please remove .page-id-809 from wherever you see it, just leave the #top alone
You can look in the body tag for other classes which you can use to target this css at specific pages.
@media only screen and (max-width: 479px) {
#top.page-id-809 .post-title {
margin-top: 1.2em !important;
}
#top.page-id-809 .main_color.container_split.thisOverlap .container > .content, #top.page-id-809 .main_color .template-overlap {
background-color: rgba(255, 255, 255, 0.0) !important;
}
}I know there is a border there somewhere, but I am not sure how it shows on iphone. Please let us know if its fine or you want the top border to go (the two side borders will have to remain or it will look goofy (i think at least, but its your call).
Thanks,
Nick
Thanks, Nick.
I've gone with the second one, and you can see how it looks on oakflatsanglican.com/visitors
It's a little weird having a feint line through the box. If we can fix that, it will be great. But if not, then it's acceptable.
What do you think?
Cheers.
Jodie
Nick
Moderator
Jodie,
Don't know why i didnt think of this earlier, but don't even need any of the other code I gave you.
@media only screen and (max-width: 479px) {
#top.stretched .container_split.thisOverlap .container > .content {
margin-top: -31px !important;
}
#top .post-title {
margin-top: -.8em !important;
}
}You can remove the css I gave you the last time and put this one in its place.
Thanks,
Nick
Yep, that's much better. Thanks, Nick.
However, when I put the iPhone on landscape, the same problems occur as before, although it's not quite as bad.
The text on the front page slider looks weird (text is cut off) and it would be good to move the whole white text box down just a little (say, half way between where it is at the moment and where it is for the portrait orientation).
Any thoughts?
Cheers!
Yep, Nick, changing it to 480px fixed it all. Great stuff.
Now, to get it just right, I think the opening page slider is still not right.
Ideally there would be two changes.
Firstly, instead of the image being so wide and short, is it possible to crop the image so that it's a bit taller?
Secondly, the heading of the slider text is very small, and the spacing large. Especially compared to the big text that's underneath it. So if you look at our main page oakflatsanglican.com on an iPhone, you'll see that the writing 'Join us to experience real hope in the real Jesus!" is huge, but the text on the slider "You're welcome at Oak Flats Anglican" is tiny. But when you're on a normal display, both of those texts are the same size. Any way to fix that?
Thanks for your patience, but I think together we're improving the responsive code for iPhones, which will improve the theme for not just me, but for others, too.
Grace and peace,
Jodie
Nick
Moderator
Hi Jodie,
Hehe. I don't have an iPhone or a smartphone but instead using my imagination to help you. :)
1) image size on smartphone / iphone
Unfortunately we are dealing with 1 image whose aspect ratio (height to width) can not be changed without making the image look blurred or stretched out. The main image is 1400 x 450 and shrinks down *proportionally* until its about 362 x 116 on iphone portrait view. I can force it to be 362x362 but I think you can imagine what that would do to the image itself. ( http://www.clipular.com/c?3805123=rV30zTiu0CAVpTW6j-obhMgzI8U&f=.png )
If you are happy with that result, just add this css to the same place as the previous
@media only screen and (max-width: 479px) { /*change to 480 if you want landscape iphone included*/
#top .slideshow li img {
height:362px !important;
}
}Displaying completely different images based on device screen size is not (at the moment) part of the framework and of course its possible to implement such functionality, but (imo) would be outside the scope of the support team.
2) Slider text smartphone / iphone
The code below will change the sizes. remember that 479px width hits only the portrait, while 480 will hit both the portrait and landscape. You can increase em (same as pixels but better) sizes by decimals 3 places out ( example 2.491em ) . Please try the sizes I am giving you first before adjusting.
@media only screen and (max-width: 479px){
/*this controls slider regular header font size*/
#top .slideshow_caption h1 {
font-size: 1.3em !important;
line-height: 1.3em !important;
}
/*------------------------------------------------------------*/
/*this controls slider regular font size*/
#top .slideshow_caption .featured_caption {
font-size: 1.0em !important;
line-height: 1.1em !important;
}
}Thanks,
Nick
You must log in to post.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
