When it comes to my website on a desktop screen, the body text should not be at the top of the page. However, on an iPhone, it must be displayed at the top. I've created a class with empty paragraphs to control the display on and off, but this class should not show up on the iPhone. Strangely, the code provided does not seem to be working correctly on my iPhone 6+ when using Safari, while it works perfectly fine on an iPhone 6+ with FireFox.
Here is the HTML code:
<div class="display-breaks">
<p></p>
<p></p>
</div>
CSS....
// Set Defaults - display the paragraphs
.display-breaks { display: block; }
..........
// Hide the paragraphs
@media only screen and (max-width: 480px){
.display-breaks { display: none !important; }
}
When adjusting the width of the website on my desktop, the position of the text seems to jump around slightly indicating that the display toggle functionality is indeed working, albeit inconsistently.