CSS for iPad in Portrait Orientation

jalexartis · Member · Mar 16, 2016 at 3:24 pm
Copy link

Add topic to favorites
CSS help please.

I want to pad-left 93px to a 768×1024 iPad–portrait orientation.

I have unsuccessfully tried nearly possibility. Using online iPad emulators, my code seems not to reach the iPad I want. Yet, I am using CSS to fine tune other mobile devices, including my Twenty Sixteen widgets on the 7681024 iPad, landscape orientation.

I have used various online tools to determine the CSS Media Queries for iPads & iPhones.

This is one set of the coding I have used:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {
.site-main {
margin: 0 auto;
padding-left: 90px;
width: 100%;
}
}

Using Google Chrome inspect on the emulator, I can enter the padding I want and see the change I want. Copy the element to my CSS, save it, then refresh the emulator and nothing changes.

I have tried with and without the margin and width statement. I’ve tried with and without the WebKit. I do not know of any combination I have not tried. I have spent significant parts of 2 days trying to resolve this problem.

What am I missing? What am I not doing?

Thanks in advance. I look forward to applying your solution.

I think my CSS is visible to you, I also have it available for others to view @ [ http://bit.ly/1Q5s0yw ].

James [a.k.a. jalexartis]

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 17, 2016 at 1:49 am
Copy link
Hi James, I’m seeing the sidebar move down below the content at 909px and narrower. At 909px, and down to 709px, I’m seeing the content narrower than the white area with a wider margin on the right. At 708px, the content and featured image adjusts to full width minus 7.6923% of left and right padding.

Can you let me know exactly what you are wanting as the final result and I would be more than happy to help accomplish that. I’m not sure I understand exactly what you are wanting.
jalexartis · Member · Mar 17, 2016 at 1:57 am
Copy link
I am delighted you have a response. In portrait mode, to my knowledge, there is no sidebar beside the content. It follows the content in that mode. I am okay with that.

I want an equal amount of whitespace, left and right of the content area. I think the result at 708px is what I want. That is “min-width”?

I tried different numbers, but never saw a result. I also search the forums. We are fortunate you are here for us.

I’ll plug in your numbers.

Thanks man!!!

James
jalexartis · Member · Mar 17, 2016 at 2:06 am
Copy link
I still have no movement.

@media only screen and (min-device-width : 708px)
and (max-device-width : 1024px) and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* under development–NOT WORKING YET, 03/16 */
.site-main {
margin: 0 auto;
padding-left: 93px;
width: 100%;
}
}

Using Inspect, I do not see the property I set. Of course, this assumes the emulators work. I’ve used different ones and get the same non-result.

Thanks again!

James
thesacredpath · Member · Mar 17, 2016 at 2:10 am
Copy link
James, this is what I would do so that things look consistent between 909 and 708 pixels in width. Add this to the bottom of your custom CSS and see what you think.
```
@media screen and (max-width: 909px) and (min-width: 708px) {
	.entry-header, .entry-summary, .entry-content, .entry-footer, .post-thumbnail {
		margin-left: 7.6923%;
		margin-right: 7.6923%;
	}
}
```
jalexartis · Member · Mar 17, 2016 at 2:18 am
Copy link
BEAUTIFUL!

I love it. it is much better than te balance I was trying to achieve.
Content is better than perfect.

My sidebar sits off to the left. Do I need to pad or include an element in the group you gave?

Yes, the emulators reflect the CSS.

jaa
jalexartis · Member · Mar 17, 2016 at 4:07 am
Copy link
This the way I dealt with the widget sidebar [which follows the content.

/** iPad CODING, width, elements, and and margin code from
thesacredpath, WordPress.com Happiness Engineer, 03/16 **/

@media screen and (max-width: 909px) and (min-width: 708px) {
.entry-header, .entry-summary, .entry-content, .entry-footer, .post-thumbnail {
margin-left: 7.6923%;
margin-right: 7.6923%;
}

.widget {
/* Widget placement for iPad, NEW 03/16 */
margin-left: 55px;
width: 100%;
margin-bottom: 10px;
}
}

It is positioned where I want it and the size of the pictures is fine. Unless I have bad coding, I’m good.

At this point, please close this issue as resolved.

Thank you sir!

James
thesacredpath · Member · Mar 18, 2016 at 12:42 am
Copy link
James, glad that worked for you, and your code looks good, and you are welcome.
jalexartis · Member · Mar 18, 2016 at 10:42 am
Copy link
Shout Out!
thesacredpath · Member · Mar 18, 2016 at 8:38 pm
Copy link
James, thank you, it was my pleasure to help. Let us know if you have additional problems or questions.
jalexartis · Member · Mar 18, 2016 at 8:42 pm
Copy link
Sure. Thanks and I will.

I try to find answers and solve my problems without help, but sometimes that is not possible.

Enjoy The Sacred Path.

jaa

No items found.