Multipe iPad issues

[dsirard11]

Hello,

As we design our site, we have noticed that there are several issues when viewing from an iPad.

PORTRAIT VIEW:
We lose our top navigational menu and the side pull-down menu does not match the top menu any longer

All text used in grid boxes is misaligned or out of place:
BAR SOAP
SKINCARE
ACCESSORIES
SALE

There is an error on each page (see the Apparel page for example), the text in the slider is positioned over the image

Instagram pics are too large and we have one blank square

LANDSCAPE VIEW:

All text used in grid boxes is misaligned or out of place:
BAR SOAP
SKINCARE
ACCESSORIES
SALE
APPAREL
BLOG
HOME

There is an error on each page (see the Apparel page for example), the text in the slider is positioned over the images

Instagram pics are too large and we have one blank square

The link to Facebook from iPad isn’t working. It works fine from a computer.

Can you assist me in correcting these issues so our site looks professional and correct on an iPad?

Thank you,
Dawna

[David Martin – Support]

Hi,

1)

Please add your main menu to your mobile menu also. Appearance => Menus => Menu Settings => Mobile Menu.

Did you want the transparent header also?

2)

It looks like you have inline styles on the text <p> tags. Can you remove that? If not, you will need to use an iPad portrait specific media query to reset the margin:

Portrait:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.image-banner-content p {
	    margin: 0!important;
	}
}

Landscape:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	.image-banner-content p {
	    margin: 0!important;
	}
}

3)

What size do you want them to be? 2 columns, 3 columns or 4? You would just change the percentage width to match your requirements, example 4 columns would equal 25%:

@media only screen and (max-width: 1024px) {
	.blog-grid-items .blog-item.col-sm-sf-5 {
    	width: 25%!important;
	}
}

4) What error to you get for the Facebook link? Can you screenshot this?

Thanks,
David.

[dsirard11]

Hello,

In response to iPad issues noted above:

1. We’ve cleared up the Facebook issue.

2. The alignment of text in the Homepage grid boxes is fixed – thank you!

3. We made the recommended changes for Instagram and now we see 4 squares – which is perfect. The issue is there is a second row with one square. How do we eliminate the second row?

4. If you click on the Homepage grid boxes – it opens to a page with a Swift slider. The problem is that the text and navigational arrows go over the product image. See attached images. How do we fix this? It seems to be worse in Portrait view – but it does occur in Landscape as well.

Thank you,
Dawna

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

3) The width of the squares is 25%, this works fine for 4 squares. If you have more (5 for example) and want to keep them on one line, you would need to use 20%. 100 / 5 = 20.

4) This will not be an issue on mobile as there is no hover? It’s touch swipe. The sample below code would get you what you requested however.

.swift-slider a.swift-slider-prev {
    left: -30px;
}

.swift-slider a.swift-slider-next {
    right: -30px;
}

Thanks,
David.

[dsirard11]

Hi David,

I’m all set with this. Thank you for your help! 🙂

[David Martin – Support]

No problem.
-David.