Change order of content blocks on blog pages on mobile

Site URL: https://www.atuttatuscia.it/database/monti-cimini-e-lago-di-vico/caprarola/tusciavventure

Hi everyone,

I am looking to change the order of content blocks on all blogs pages on mobile. 
Here's an example: https://www.atuttatuscia.it/database/monti-cimini-e-lago-di-vico/caprarola/tusciavventure 
(pw: Access)

On mobile, I would like to have the main picture between the address "Lago di Vico, Località Spinaceto etc" and the description "Fantastico Parco Avventura all’interno della Riserva Naturale Regionale del Lago di Vico etc".

How can I achieve that? It needs to be a piece of code that applies to all my blog pages, not just this specific one.

Thank you!

You can use this code to Website Tools > Code Injection > Footer. You can try it, if it works, I will give you a rule to apply to all blogs

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
function run() {
    if ($(window).width() <= 767) {
$('div#block-b2c52e62e1dc785f1a5f').insertBefore('div#block-yui_3_17_2_1_1728397085511_50110');
} else {

}
}
    run();
    window.addEventListener('resize', run)
});
</script>

Hi @tuanphan, yes it works, thank you! Please can you give me the rule to apply to all blogs? 

Hi @tuanphan just to ask if you are able to send me the generic rule which applies to all blogs pages? Thank you.

You try these steps, then use code

(1) First, edit Image > Add this text to ALT Image

mobileimg

(2) Next, use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
function run() {
    if ($(window).width() <= 767) {
$('div.image-block [alt*="mobileimg"]').insertBefore('div.blog-item-content .sqs-layout .span-12>.html-block:first-child');
} else {

}
}
    run();
    window.addEventListener('resize', run)
});
</script>

Hi @tuanphan, I have added the alt text to the relevant image on 2 separate blogs.

On this one https://www.atuttatuscia.it/database/monti-cimini-e-lago-di-vico/caprarola/tusciavventure it works, although the address (Lago di Vico, Località Spinaceto Fondo Cencio, 01032 Caprarola (VT) needs to come before the image, just after the title.

On this other one https://www.atuttatuscia.it/database/monti-cimini-e-lago-di-vico/ronciglione/hype-salon it doesn't work.

On 10/16/2024 at 7:22 PM, TheHouseOfMischief said:

Hi @tuanphan, I have added the alt text to the relevant image on 2 separate blogs.

On this one https://www.atuttatuscia.it/database/monti-cimini-e-lago-di-vico/caprarola/tusciavventure it works, although the address (Lago di Vico, Località Spinaceto Fondo Cencio, 01032 Caprarola (VT) needs to come before the image, just after the title.

On this other one https://www.atuttatuscia.it/database/monti-cimini-e-lago-di-vico/ronciglione/hype-salon it doesn't work.

I wrote a detail guide here

Thank you @tuanphan, I have replied directly on the new thread.