Removing HTML element on mobile view?

Question

I am not using jquery mobile.

I built a template in WordPress and have a full width background that can be set to a different one for each page: Background_1.jpg = Home, Background_1.jpg = About, ens....

This is what is loaded in the front end:

<div id="bg">
    <img id="background" src="images/Background_1.jpg" alt="background">
</div>

So my problem is the following:

When i get to the fluid grid layouts i would like to remove this element completely to speed up the load time.

I also dont want to hide it, i want to remove the html when the window size is smaller than 600px.

Has anyone done this before?

Answer 1

Use a media query in your css. Something like this:

@media (max-width: 767px) {
    .styleName {
        display:none;
    }
}

This hides the css element if the window size is less than 767px. You do need the right markup in your html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

To hide a div on a mobile view, you need the right window size. This is about right from the bootstrap framework:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

To implement this into your code, you would use:

<div id="bg" class="styleName">
CODE
</div>

Read up more here: Mobile Device Trick

Answer 2

Many years later and lots of testing as well as training and general experience.

There are different solutions that I have found works best for instances like this:

1. Optimize your images with a PHP image library which can easily be done within WordPress, that will make the images web friendly and load faster on all devices.
2. Detect the screen size on the Apache request with PHP and load the template file with hooks. Like the AMP plugin loads a different theme for mobile.
3. Detect screen size with PHP and optimize/generate images according to the size.

I used PHP Image Library along side my WordPress to generate and load the images in the size and quality I want and allows me to change size on the fly.

For the screen/user-agent detection I use Mobile-Detect.

You can also combine both of these solutions for best results.