Update picture for mobile and tablet view (Semplice template)

I am currently using the Semplice Theme for my portfolio website and I have come across a little issue. I want to figure out how to change an image specifically on smaller devices like mobile phones and tablets. However, I'm still quite new to coding.

While searching for a solution here on stackoverflow, I became confused by the different answers as the code/solution I found doesn't match the image code used in the Semplice theme.

It's good to note that in the Semplice theme, you can write custom code before entering the content editor on the page you are working on, which typically looks something like this.

The image code I currently have appears as follows:

<img class="live-image" src="/02_shirt.png" alt="02_shirt" style="">
<img class="live-image" src="/03_bag.png" alt="03_bag" style="">

Both of these images are placed within separate divs:

<div class="column-image column-img-full left">
<div class="column-image column-img-full right">

Best regards, Ray

jqueryhtmlcsswordpress

Answer №1

Check out media queries - this is what you need!

Simply add this custom CSS to ‘Semplice’ → ‘Advanced Styling’ → ‘Custom CSS & JS’ → ‘Custom CSS’

Select the screen size you want below:

Insert your class or id selector within these media queries.

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 544px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {

}

To hide an element, use:

display:none;

To show an element, use:

display:block;

You can do something like this:

    .hidden-xs-sm-md{
        display:none;
    }
    
      /* Medium Devices, Desktops */
        @media only screen and (min-width: 992px) {
        
    
          .hidden-xs-sm-md{
               display:block;
           }
        
        }
   
    <img class="live-image hidden-xs-sm-md" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Blue_Tshirt.jpg/220px-Blue_Tshirt.jpg" alt="02_shirt" style=""> 
    <img class="live-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Blue_Tshirt.jpg/220px-Blue_Tshirt.jpg" alt="03_bag" style="">

hidden-xs-sm-md - this class will hide the element on mobile and tablet devices but show it on laptops and desktops.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to customize the Angular Kendo Grid to be non-scrollable and automatically adjust its height to fit the row contents?

I'm trying to create a Kendo Grid in Angular that is Non-Scrollable and adjusts its height to fit the row contents. However, my current implementation is not working as expected, as it still gives me a fixed height. <kendo-grid [data]="propertyVie ...

cssangularkendo-uitelerikangular8

Ways to deactivate the submit button using Cookies, sessions, or local storage

Although cookies and storage can be deleted, they can still help prevent many human spammers who are unaware of this. How can I temporarily disable the form submit button on a specific page for just one day? I want to create a code that saves "Submitted" ...

javascriptphphtmlforms

an issue encountered while trying to print a webpage styled with CSS

Users are given the option to print the current page on the website by clicking on a menu element: <li> <a href="#" onClick="window.print()"> <i class="icon-print"></i> Print Page </a> </li> The page contai ...

javascripthtmlcss

Events in the backbone view fail to trigger after a re-render

For some reason, I am struggling to get mouse events to work on my backbone view after it is re-rendered. It seems like the only solution is to use a rather convoluted jQuery statement: $("a").die().unbind().live("mousedown",this.switchtabs); I initially ...

javascriptjquerybackbone.jsunderscore.jsbackbone-events

How can you ensure that the right data types are sent through ajax requests?

My goal is to ensure the server receives data in the correct data type when using ajax. For example, I want boolean values to be received as actual booleans, integers as integers (not strings), and so on. I attempted a solution where I sent the data as JS ...

phpjqueryajax

Enhancing search functionality with jQuery and Ajax

How can I create a window below a search bar to show search results with names and images? For now, using a placeholder object with information like this: data: "{one : 'test',two: 'test2' }" I have a basic understanding of jQuery, bu ...

jqueryajax

Using CSS to ensure the height of two floated divs matches the height of the first div

I'm struggling with the following code snippet: <div id="container"> <div id="left"> [ some contents...] </div> <div id="right"> <div id="inner"> [ some templates... ] < ...

htmlcss

Employing jQuery to redirect to a different URL when a button is clicked

I've been experimenting with a project that involves both JQuery and AJAX. One of the features I have added is JQuery autofill. Here is the code snippet for the form: <form class="form-horizontal"> <div class="form-group"> < ...

javascriptjqueryajax

Filter WordPress posts using Ajax on a specific page

I have successfully implemented a posts filter and pagination feature on my website. However, I am facing an issue with the filter when it comes to filtering posts only on the current page. Currently, if I filter posts on page 1, the filter considers p ...

phpjqueryajaxwordpresspost

Error encountered with AJAX call when attempting to utilize string method

I am looking to add HTML content to a TinyMCE editor in an ASP.NET MVC project. After some thought, I have found a solution that involves converting the HTML file to a string on the server side and then calling it using Ajax on the client side. Here is a ...

javascriptc#jqueryajaxasp.net-mvc

When HTML is outside of the root web directory, it is unable to access any files

My files for html, css, and javascript are structured within the /www/ directory in their own respective folders (/www/html, /www/css, /www/js). The web root is located at /www/www/ When using the readfile function in my PHP code like this: readfile(" ...

phphtmlcssweb

How can PHP be integrated with MaterializeJS for autocomplete functionality?

Here is my PHP code snippet: <?php require_once __DIR__ . '/../inc/_puredb.php'; $query = $db->prepare("SELECT user_name FROM users"); $query->execute(); if($query->rowCount() > 0) { $rows = array(); while($res = $quer ...

javascriptphpjquery

What is the best way to utilize document.body in order to add a table to a designated DIV?

Once I make a copy of the table, my goal is to insert this new table into a designated DIV named div1. How can I add the new table to div1? <div id="div1"> </div> var copiedElement = document.getElementsByTagName("table" ...

javascriptphphtml

The issue of JavaScript failing to connect to the HTML file

As I work on my basic HTML file to learn Javascript, I believed that the script was correctly written and placed. Nevertheless, upon loading the file in a browser, none of the script seems to be functioning. All of my javascript code is external. The follo ...

javascriptjqueryhtml

What could be causing the absolute positioned element to not follow the positioning rules as expected?

Currently, I am following a guide on creating a website using Dreamweaver (). However, I have encountered a step in the tutorial that I am struggling to comprehend. The issue lies with an element named #navlink, which is absolutely positioned in the DOM s ...

htmlcsscss-position

What is the best way to make a JavaFX WebView the same size as the entire scene?

My goal is to have a JavaFX WebView that automatically resizes to fit the scene upon startup. Currently, I am focused on setting the initial size properly. @Override public void start(Stage stage) { try { Scene scene = new Scene(createWebViewP ...

javacsswebviewjavafxjavafx-webengine

Transfer data from a selection list in an HTML document to a Google Apps Script function and then dynamically update another selection

I am using a Google Web App to fetch text data from a spreadsheet based on dropdown selections. I want the options in the "Grade" dropdown list to be dynamic, changing according to the selection made in the "Role" dropdown menu. My approach involves using ...

htmlgoogle-apps-script

Guide on linking navigation to various buttons on the Angular menu

I am looking to enhance the functionality of my left menu buttons by adding a navigation path to each one (excluding the main menu). The menu items' names are received as @Input. I have set up a dictionary mapping all the items' names to their r ...

javascripthtmlangulartypescriptmenu

Employing live labels on a Morris Bar Chart

I'm using the Morris Bar Chart to showcase the sales of different products. To enhance user experience, I want to display dynamic labels when hovering over the bars. The data is being fetched through PHP. array('product' => $row['pr ...

javascriptphpjquerymorris.js

Error: The locator I used with the ID getUserById did not find any elements

Here is the code snippet from my HTML file: <h1>User list</h1> <button class="btn btn-primary" [routerLink]="'/register'">Register</button> <br> <br> <table class="table& ...

javascripthtmlangularprotractor