Regarding mobile and Ipad support

ideaphora · Member · Mar 17, 2015 at 12:30 pm
Copy link

Add topic to favorites
I have switched mobile theme . But still it seems all messed up on Ipad . The footer are getting merged, Some text are getting cut.
Even in the contact page the address is going outside the screen.
Can you help me with the same.

The blog I need help with is: (visible only to logged in users)
galois · Member · Mar 17, 2015 at 12:31 pm
Copy link
Ipad support: https://ios.forums.wordpress.org/
thesacredpath · Member · Mar 17, 2015 at 9:17 pm
Copy link
Hi there, since you are using a responsive width theme, my first suggestion is to go to Appearance > Mobile and disable the mobile theme and let’s try a couple of changes.

First in the following rule in your custom CSS, change height to min-height.
```
.features{
	background:#2c3e50;
	color:#fff;
	min-height:480px;
}
```
In the following rule within your min-width: 1024px media query, change width to max-width.
```
@media only screen and (min-width: 1024px){
	.feature{
		max-width:25%;
		float:left;
		display:block
	}
...
```
Let’s me know how that goes.
ideaphora · Member · Mar 18, 2015 at 11:42 am
Copy link
with that its get more messed up
thesacredpath · Member · Mar 18, 2015 at 10:34 pm
Copy link
The mobile theme only activates on small devices such as phones. On iPads and other tablets, the site’s main theme is active. Since I can’t see your site on my iPhone and iPad, because it is Private, I can’t actually look on those devices. I have to use simulators. I can see it on my desktop system though, hence I can use the simulators.

The blue area is not extending down to the bottom of Intuitive and Flexible. Changing height to min-height in .featured in your custom CSS takes care of that. A static declaration, such as height: 480px; will not expand, it is a fixed value. Using min-height, you are saying I don’t want this less than 480px in height, but it can be taller. That allows it to expand to the bottom of Intuitive and Flexible.

On the widgets in the footer widget area, it is going to take me a while to figure out what is going on with the Latest News widget.
ideaphora · Member · Mar 19, 2015 at 11:53 am
Copy link
Okay…can u figure out and let me know.
And even on the contact page ,address is going out of the page, as in we will have to scroll
blackmountainresearch · Member · Mar 19, 2015 at 3:42 pm
Copy link
Hey, I have the same problem on the mobilde version of my website: http://black-mountain-research.com/
The custom image merges into the site title.
I have tried all margins etc.
Any idea?
thesacredpath · Member · Mar 19, 2015 at 7:04 pm
Copy link
@blackmountainresearch, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.
thesacredpath · Member · Mar 19, 2015 at 7:04 pm
Copy link
@ideaphora, I’m looking at the widgets.
blackmountainresearch · Member · Mar 19, 2015 at 11:16 pm
Copy link
@thesacredpath, thanks! did that!
Here it is: https://en.forums.wordpress.com/topic/problem-with-css-on-mobile-template-oxygen?replies=1#post-2318641
ideaphora · Member · Mar 23, 2015 at 3:48 am
Copy link
Hey, Did you look at the code. ?
thesacredpath · Member · Mar 23, 2015 at 6:13 pm
Copy link
@ideaphora, with https://simpleone1.wordpress.com/ set to private, I cannot view it on my iPad, only on my desktop. When I view it on my simulator, I am not seeing any problems.

Can you make your site live for a short time so that I can look at it on my iPad directly?
ideaphora · Member · Mar 26, 2015 at 4:47 am
Copy link
Even if u see the preview on desktop , then also the footer divs are combining both on Ipad and mobile View. Please help me with that
thesacredpath · Member · Mar 26, 2015 at 8:11 pm
Copy link
@ideaphora, this is all guesswork on my part. I’m seeing a lot of things in your CSS that are conflicting with other things, and a couple of the suggestions I have suggested I don’t see in your CSS at all. You have heights set for widgets in at least 4 different CSS rules. The last CSS rule with a height for widgets would be the one that would be used. First off, find this in your CSS
```
div.news-list {
    height: 220px;
    overflow: auto;
}
```
and change it to this
```
.widget-news {
    overflow: auto;
}
```
To fix the blue section with Seamless, Effective… in it, find this in your CSS
```
.features {
    background: none repeat scroll 0 0 #2c3e50;
    color: #fff;
    height: 480px;
}
```
and change it to this
```
.features {
    background: #2c3e50;
    color: #fff;
    min-height: 480px;
}
```
Next, add this to the bottom of your max-width: 799px media query.
```
section.widget{
    max-width:60%;
    margin:1.5% auto;
}
.widget-news, .post-date {
    line-height: 2em;
}
.post-date {
    margin-top: -20px;
}
.news-list {
    float: left !important;
}
```
I see the tops of the titles are being cut off in your widgets. Find this in your CSS
section.widget h3
and set the top margin to 0.
ideaphora · Member · Mar 30, 2015 at 12:08 pm
Copy link
The contact page is still the same. Address comes outside the menu.
And by making the changes the footer with seamless,effective seems lot left.
thesacredpath · Member · Mar 31, 2015 at 6:03 pm
Copy link
On responsive width themes, such as Sketch, HTML tables like you are using on your Contact page are very difficult to implement and have them adjust properly for all screen sizes. I’ve reproduced that page on my test site and worked out a solution that works on Sketch.

I’m using a Media Query to limit this change to screens/windows 800px and wider since the Contact Form gets too narrow below that width. Below 800px, the two sections will go to 100% width and will view properly on tablets and phones. There are two parts to this solution.

1. Add the following CSS to your custom CSS at the very bottom.
```
@media screen and (min-width: 800px) {
.my-contact{
	float:left;
	width:45%
}

.my-addr{
	float:right;
	width:45%
}
}
```
2. Edit the content you have in your Contact page and enclose the contact form Shortcode, and the address information in two separate divs with CSS classes assigned.
```
<div class="my-addr">
Address information here
</div>
<div class="my-contact">
Contact form shortcode here
</div>
```

No items found.