CSS for iPad in Portrait Orientation
-
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)
-
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.
-
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
-
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
-
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%; } }
-
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
-
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
-
-
James, thank you, it was my pleasure to help. Let us know if you have additional problems or questions.
-
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
- The topic ‘CSS for iPad in Portrait Orientation’ is closed to new replies.