CSS for mobile phone

Hi there,

I'm having a tough time seeing what you mean. Any chance you can share a couple screenshots of the specific areas you're having trouble with?

Thanks!

The funny thing is when I look at the MOBILE phone testers on the desktop --

http://quirktools.com/screenfly/#u=http%3A//testsite.yazoogle.com.au/advert/samsung-galaxy-tab-a-8-wi-fi-16gb-tablet/&w=375&h=667&a=37&s=1

it does NOT show what is happening as described above --so maybe it's my OLD mobile that is just werid -- lol the phone is about 5 years old -- I think its a 4.1 android -- or may be in the '3s'

the only thing thatI don't like on the PC mobile SCREEN tests is the font for the product titles could be a little smaller -- what CSS would that be ?

AND LASTLY

WHen you try to Add a NEW product -- and you are filling out the online FORM -- when you click the browse button to add an image -- in firefox it works OK -- the image folder pops up but in Chrome -- on the mobile ( android ) or windows 10 Microsoft IE edge -- the browse button does not work -- it flashes the page -- (( the drop feature works in IE 10 but thats impossible on a phone )) --

mobile test page

http://quirktools.com/screenfly/#u=http%3A//testsite.yazoogle.com.au/adverts/add/&w=320&h=533&a=34&s=1

Joanne

cheers

Joanne

To reduce the size of your titles on mobile, you can use this CSS:

@media (max-width: 768px) {
    h1 {
        font-size: 25px;
    }
}

Is that form a specific plugin? Have you checked with their developers to see if it's something on their end?

That worked Great

however just tested again and that price box has once again showed an overlap on the text that shows the date

http://quirktools.com/screenfly/#u=http%3A//testsite.yazoogle.com.au/&w=320&h=533&a=34&s=1

on the page called ' browse classified adverts'

http://testsite.yazoogle.com.au/browse-classified-adverts/

any ideas how to fix ??

cheers
J

Ah, this should help:

@media (max-width: 768px) {
    span.advert-date {
        display: block;
    }
    div.advert-price {
        position: relative;
        right: auto;
    }
}

that worked fine!! thank you

and maybe one last one -- the bullet text looks a little too big now compared with the P text - what is the css to reduce this one on your theme for the phone ?

thank you -- you have been a FANTASTIC help -- one of the BEST theme support person I have ever dealt with in all my years of working with themes and plugins.

Joanne

This might help:

@media (max-width: 768px) {
    .entry-content li {
        font-size: 13px;
    }
}

Happy to help! :)

hmmm it removed the bullets -- so text is garbled -- just need the FONT size smaller I should think not move to the left

any other ideas

Joanne

I adjusted the CSS above :)

yes - PERFECT -- thank you so VERY much!!

Joanne

You're welcome :)