Media query question [Archive] - Dynamic Drive Forums

theremotedr

02-02-2019, 09:51 PM

Hi,
Here is the site https://www.theremotedoctor.co.uk/index.html
On my pc all is well in respect of the ssl logo.

On a phone I don’t see it at all where it should be.
I’ve looked at the code a couple of times but don’t see why it isn’t being shown.

It should be where the red arrow indicates on a mobile device.

6336

coothead

02-03-2019, 11:38 AM

Hi there theremotedr,

using this page...

https://www.theremotedoctor.co.uk/karaudi.html

...as an example for all the others, change this HTML...


<aside id="selection">
<h2 class="pc-thing">ITEM SELECTION....</h2>
<div id="google_translate_element"></div>
<nav id="secondary-navigation" class="pc-thing">
<ul>
<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI001.png', 'Audi001','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8EO-837-220Q + virgin canbus chip</a></li>

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI004.png', 'Audi004','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8PO-837-220D + virgin canbus chip</a></li>

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI003.png','Audi003','£13.00 Chip Will Require Programming Key Will Require Cutting + Virgin Chip & Uncut Key UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">Non remote key + virgin canbus chip</a></li>

<li class="licenter"><a href="https://www.facebook.com/www.theremotedoctor.co.uk/posts_to_page/" id="rmfb" target="blank">Read My Facebook Feedback</a></li>

<li class="licenter"><a href="#home" id="rtm" class="scroll">Return To Menu</a></li>
<img src="m-images/ssl-secure-logo.png" alt="the remote doctor secure transactions">

</ul>
</nav>


...to this...


<aside id="selection">
<h2 class="pc-thing">ITEM SELECTION....</h2>
<div id="google_translate_element"></div>
<nav id="secondary-navigation" class="pc-thing">
<ul>
<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI001.png', 'Audi001','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8EO-837-220Q + virgin canbus chip</a></li>

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI004.png', 'Audi004','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8PO-837-220D + virgin canbus chip</a></li>

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI003.png','Audi003','£13.00 Chip Will Require Programming Key Will Require Cutting + Virgin Chip & Uncut Key UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">Non remote key + virgin canbus chip</a></li>

<li class="licenter"><a href="https://www.facebook.com/www.theremotedoctor.co.uk/posts_to_page/" id="rmfb" target="blank">Read My Facebook Feedback</a></li>

<li class="licenter"><a href="#home" id="rtm" class="scroll">Return To Menu</a></li>
<li><img src="m-images/ssl-secure-logo.png" alt="the remote doctor secure transactions"></li>

</ul>
</nav>


...and this HTML...


<ul id="special-items" class="mobile-thing">
<li>
 CLICK HERE TO ROTATE THE ITEM LIST BELOW 
When The Highlighted Item In The Middle Of The List Matches Your Choice... 
CLICK IT

<div id="ul-holder">
<ul>
<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/AUDI001.png', 'Audi001','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8EO-837-220Q + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI004.png', 'Audi004','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8PO-837-220D + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI003.png','Audi003','£13.00 Chip Will Require Programming Key Will Require Cutting + Virgin Chip & Uncut Key UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">Non remote key + virgin canbus chip</li>
<li><a href="https://www.facebook.com/www.theremotedoctor.co.uk/posts_to_page/" target="blank">Read My Facebook Feedback</a></li>
<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/AUDI001.png', 'Audi001','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8EO-837-220Q + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI004.png', 'Audi004','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8PO-837-220D + virgin canbus chip</li>
</ul>
<div id="cover-top"></div>
<div id="cover-bottom"></div>
</div>
</li>
</ul>
<audio id="click-sound" class="mobile-thing" controls>
<source src="sound-file/click-scroller.mp3" type="audio/mpeg">
</audio>

...to this...


<ul id="special-items" class="mobile-thing">
<li>
 CLICK HERE TO ROTATE THE ITEM LIST BELOW 
When The Highlighted Item In The Middle Of The List Matches Your Choice... 
CLICK IT

<div id="ul-holder">
<ul>
<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/AUDI001.png', 'Audi001','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8EO-837-220Q + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI004.png', 'Audi004','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8PO-837-220D + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI003.png','Audi003','£13.00 Chip Will Require Programming Key Will Require Cutting + Virgin Chip & Uncut Key UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">Non remote key + virgin canbus chip</li>
<li><a href="https://www.facebook.com/www.theremotedoctor.co.uk/posts_to_page/" target="blank">Read My Facebook Feedback</a></li>
<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/AUDI001.png', 'Audi001','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8EO-837-220Q + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI004.png', 'Audi004','£40.00 Chip Will Require Programming Key Will Require Cutting New Canbus Chip & Uncut Key Used But Good Condition UK Recorded £2.50 International Signed For £10.00 Posted From The UK The Remote Doctor')">8PO-837-220D + virgin canbus chip</li>
</ul>
<div id="cover-top"></div>
<div id="cover-bottom"></div>
</div>
</li>
<li><img src="m-images/ssl-secure-logo.png" alt="the remote doctor secure transactions"></li>
</ul>
<audio id="click-sound" class="mobile-thing" controls>
<source src="sound-file/click-scroller.mp3" type="audio/mpeg">
</audio>

To center the SSL image for mobile view add this CSS...

#special-items li:last-of-type {
text-align: center;
}

...to your latestChanges.css file.

Good luck with the the task ahead. :D

coothead

theremotedr

02-03-2019, 12:55 PM

Wow that’s a lot.
Can you advise just the part that allows me to see the ssl on the mobile device please.
Reason being is that I won’t be able to copy & paste all that as the price, items for sale etc is different on every page that I need to apply the code to.
I was looking for just the missing code so I could then copy & paste to every page.

Many thanks.

coothead

02-03-2019, 01:17 PM

Hi there theremotedr,

I posted those large chunks of code so that you could more easily locate the amendment positions.

The first HTML change, just indicated invalid HTML coding, that required your attention

The second HTML change and additional CSS referred to the actual mobile setting.

The only code that concerns you, is that which is shown in red.

I trust that this will help your understanding

coothead

theremotedr

02-03-2019, 08:48 PM

Sorry i was on a mobile and didnt see it all.
I have now made the changes and looks ok to me.

Thanks

coothead

02-03-2019, 10:06 PM

No problem, you're very welcome. ;)

coothead