Minimum Pro Responsive ipad Portrait

[rsmithsd]

The front page background image looks good on my iMac, iPhone and iPad in
landscape. However, the iPad in portrait shrinks the window and cuts off
the background image. This happens no matter which image I use. I
understand the image window is realigning itself to show the background
image as it is responsive. My question though relates to the Minimum Pro
demo (http://demo.studiopress.com/minimum/) where the window in portrait on the iPad does not shrink and allows
for the image to display properly. Is there a way that I can force the
window to remain a certain size in portrait on the iPad? Any help is
greatly appreciated. Thank you!

URL

http://cityonahillsandiego.com

Child Theme

Minimum

http://Cityonahillsandiego.com

[jbergen]

Hi,

I see your problem. It's happening because there is a top margin set on the site tagline. All you have to do is remove that CSS rule in your style.css file, line 1767.

Here's what it looks like now:

.minimum .site-tagline {
	margin-top: 200px;
	margin-top: 20rem;
}

When I removed it, the site looked good at iPad portrait screen widths.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[rsmithsd]

So I did what you said it also changed the iphone height for some reason. But then I figured it out. I put the rem at 40 at the ipdad resolution and then added the original code on the smaller iphone resolution keeping it the same. That allowed me to change both the ipad and iphone independantly. Works great! Thank you for pointing me in the right direction.

[jbergen]

Great! I'm glad you got it working.
Jamie

---

Jamie @ Ladebug Studios

[sparkgaia]

Hi there,
I'm having the same issue - rsmithsd, could you please paste the exact code that you changed? I dont' follow how you changed the ipad resolution and the iphone resolution independently.

Thanks!
Cara

[rsmithsd]

Hi Cara, to adjust the window height change the margin-top: (X)rem higher or lower based on the focus of your photo. I have the iPad set to 50rem and iPhone set to 20rem. Let me know if you have any questions.

Here's the code:

iPad - 768px

.minimum .site-tagline {
margin-top: 200px;
margin-top: 50rem;

iphone

@media only screen and (max-width: 320px) {

.header-image .site-header .title-area .site-title a {
background-size: contain !important;
}

.minimum .site-tagline {
margin-top: 200px;
margin-top: 20rem;
}

}

[sparkgaia]

Thanks Rsmith

just to clarify, i paste it all exactly as you have laid it out in my style.css file, correct? I want to make sure I understand whether there are different locations for the codes for iPad vs iPhone etc, right?

Thanks,
Cara

[rsmithsd]

Sorry this is late. Hopefully you've already made the changes.

//iPad (Do not included this text)

@media only screen and (max-width: 768px) {

.site-header {
padding-bottom: 10px;
padding-bottom: 1rem;
}

.title-area {
padding-bottom: 6px;
padding-bottom: 0.6rem;
}

.minimum .site-tagline {
margin-top: 200px;
margin-top: 50rem;
}

.genesis-nav-menu a {
padding: 20px 10px;
padding: 2rem 1rem;
}

.site-footer .nav-secondary a {
margin: 0 10px;
margin: 0 1rem;
}

.responsive-menu {
display: none;
}

#responsive-menu-icon {
display: block;
}

.home-featured .simple-social-icons ul li a {
font-size: 36px !important;
font-size: 3.6rem !important;
padding: 20px !important;
padding: 2rem !important;
}

.genesis-grid-even,
.genesis-grid-odd,
.post-type-archive-portfolio .entry {
width: 100%;
}

.post-type-archive-portfolio .entry:nth-of-type(2n),
.post-type-archive-portfolio .entry:nth-of-type(2n+1) {
float: none;
padding: 0;
}

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

}

//iPhone (Do not include this text)

@media only screen and (max-width: 320px) {

.header-image .site-header .title-area .site-title a {
background-size: contain !important;
}

.minimum .site-tagline {
margin-top: 200px;
margin-top: 20rem;
}

[magzparmenter]

Hi
I'm hoping you might be able to help me too.
I'm on Modern Portfolio theme and having trouble with my logo image cutting off and not re-sizing on iPad portrait and iPhone. Also, the menu at the top is not displaying properly on iPhone.

I am a complete newbie at working with responsive themes, so really appreciate if you could walk me through the actual code I need and where.

Also, if you get a chance, could you look at my post about column classes, I have been struggling with it for the last day and a half.

My site is http://chasingholy.co.uk

Thanks so much!
Magz

[Author]

Posts