[marciadotcom]

The header looks fine and centered on a desktop view and mobile view. When I am looking at the site on my Ipad and hold it vertically, the header image is not centered. When I turn the ipad horizontally, it is centered. Any idea on how to fix this? Thanks, Marcia

Website: www.artisbasic.com

[larkbegin]

It sounds like there may be a CSS issue with how the header is being handled for different screen orientations, specifically for iPads in portrait mode. Try the following CSS adjustments to ensure the header centers properly:

Option 1: Flexbox (Recommended)
Copy CSS code
header {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

Option 2: Margin Auto (If Flexbox Isn’t Suitable)
Copy CSS code

header {
margin: 0 auto;
text-align: center;
width: 100%;
max-width: 1200px; /* Adjust as needed */
}

Option 3: Media Query for iPads (Portrait Mode Fix)
Copy CSS code

@media screen and (max-width: 768px) and (orientation: portrait) {
header {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
}

Let me know if I can help you further.

[Author]

Posts