CSS Codes
CSS Layouts
Results 1 to 6 of 6

Thread: Media query question

  1. 02-02-2019, 09:51 PM #1
    theremotedr's Avatar
    theremotedr
    theremotedr is offline Elite Coders
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default Media query question

    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.

    Click image for larger version.  Name: D99AE3C6-0244-4F1C-B3FC-79EA172B433F.jpg  Views: 86  Size: 11.9 KB  ID: 6336
    www.theremotedoctor.co.uk
    Reply With Quote Reply With Quote
  2. 02-03-2019, 11:38 AM #2
    coothead's Avatar
    coothead
    coothead is offline Elite Coders
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there theremotedr,


    using this page...


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

    Code:
    
<!-- left sidebar -->   
<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','<b>£40.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor>New Canbus Chip & Uncut Key</span><br><span class=usedColor>Used But Good Condition</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">8EO-837-220Q + virgin canbus chip</a></li>

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

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI003.png','Audi003','<b>£13.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor> + Virgin Chip & Uncut Key</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">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>
<!-- ************* mobile phone code ***************** -->
    ...to this...

    Code:
    
<!-- left sidebar -->   
<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','<b>£40.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor>New Canbus Chip & Uncut Key</span><br><span class=usedColor>Used But Good Condition</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">8EO-837-220Q + virgin canbus chip</a></li>

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

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/AUDI003.png','Audi003','<b>£13.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor> + Virgin Chip & Uncut Key</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">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>
<!-- ************* mobile phone code ***************** -->
    ...and this HTML...

    Code:
    
<!-- ************* mobile phone code ***************** -->
<ul id="special-items" class="mobile-thing">
<li>
<span id="butt">  CLICK HERE TO ROTATE THE<br>ITEM LIST BELOW<br><br>
  When The Highlighted Item In The Middle Of The List Matches Your Choice...<br><br>
  <u>CLICK IT</u>
</span>
<div id="ul-holder">
<ul>
<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/AUDI001.png', 'Audi001','<b>£40.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor>New Canbus Chip & Uncut Key</span><br><span class=usedColor>Used But Good Condition</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">8EO-837-220Q + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI004.png', 'Audi004','<b>£40.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor>New Canbus Chip & Uncut Key</span><br><span class=usedColor>Used But Good Condition</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">8PO-837-220D + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI003.png','Audi003','<b>£13.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor> + Virgin Chip & Uncut Key</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">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','<b>£40.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor>New Canbus Chip & Uncut Key</span><br><span class=usedColor>Used But Good Condition</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">8EO-837-220Q + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI004.png', 'Audi004','<b>£40.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor>New Canbus Chip & Uncut Key</span><br><span class=usedColor>Used But Good Condition</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">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...

    Code:
    
<!-- ************* mobile phone code ***************** -->
<ul id="special-items" class="mobile-thing">
<li>
<span id="butt">  CLICK HERE TO ROTATE THE<br>ITEM LIST BELOW<br><br>
  When The Highlighted Item In The Middle Of The List Matches Your Choice...<br><br>
  <u>CLICK IT</u>
</span>
<div id="ul-holder">
<ul>
<li><a href="#home">Return To Menu</a></li>
<li onclick="replaceMainImage('m-images/photos/AUDI001.png', 'Audi001','<b>£40.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor>New Canbus Chip & Uncut Key</span><br><span class=usedColor>Used But Good Condition</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">8EO-837-220Q + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI004.png', 'Audi004','<b>£40.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor>New Canbus Chip & Uncut Key</span><br><span class=usedColor>Used But Good Condition</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">8PO-837-220D + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI003.png','Audi003','<b>£13.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor> + Virgin Chip & Uncut Key</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">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','<b>£40.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor>New Canbus Chip & Uncut Key</span><br><span class=usedColor>Used But Good Condition</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">8EO-837-220Q + virgin canbus chip</li>
<li onclick="replaceMainImage('m-images/photos/AUDI004.png', 'Audi004','<b>£40.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><span class=keychipColor>New Canbus Chip & Uncut Key</span><br><span class=usedColor>Used But Good Condition</span><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><span class=drColor>The Remote Doctor</span>')">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...

    Code:
    
#special-items li:last-of-type {
     text-align: center; 
 }
    ...to your latestChanges.css file.

    Good luck with the the task ahead.

    coothead
    ~ the original bald headed old fart ~
    Reply With Quote Reply With Quote
  3. 02-03-2019, 12:55 PM #3
    theremotedr's Avatar
    theremotedr
    theremotedr is offline Elite Coders
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

    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.
    www.theremotedoctor.co.uk
    Reply With Quote Reply With Quote
  4. 02-03-2019, 01:17 PM #4
    coothead's Avatar
    coothead
    coothead is offline Elite Coders
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    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
    ~ the original bald headed old fart ~
    Reply With Quote Reply With Quote
  5. 02-03-2019, 08:48 PM #5
    theremotedr's Avatar
    theremotedr
    theremotedr is offline Elite Coders
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,132
    Thanks
    158
    Thanked 3 Times in 3 Posts

    Default

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

    Thanks
    www.theremotedoctor.co.uk
    Reply With Quote Reply With Quote
  6. 02-03-2019, 10:06 PM #6
    coothead's Avatar
    coothead
    coothead is offline Elite Coders
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default


    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Resolved Media query needed for existing page
    By theremotedr in forum CSS
    Replies: 4
    Last Post: 02-15-2017, 03:56 PM
  2. No Response from 480px Media Query
    By KennyP in forum CSS
    Replies: 2
    Last Post: 08-22-2016, 08:03 AM
  3. Media Query advice for ipad 1
    By theremotedr in forum CSS
    Replies: 14
    Last Post: 04-01-2016, 06:36 PM
  4. Media Query Help!
    By LeaChristine in forum CSS
    Replies: 1
    Last Post: 11-22-2014, 11:26 AM
  5. css media query issues
    By ianhaney in forum CSS
    Replies: 0
    Last Post: 11-05-2014, 07:28 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules