[Resolved] CSS for mobile phone

[Joanne Smith]

I have a TEST classified site – on the default page which shows a DUMMY product that has been added by a seller

http://testsite.yazoogle.com.au/advert/samsung-galaxy-tab-a-8-wi-fi-16gb-tablet/

or on a mobile tester

http://mobiletest.me/samsung_galaxy_y_emulator/?u=http://testsite.yazoogle.com.au/advert/samsung-galaxy-tab-a-8-wi-fi-16gb-tablet/

If you look at the ADD on a phone there are some issues with the layout again — the product header is too big and the price tag is bunching up in the box

maybe the COLUMN needs to be wider ??

I have managed to make some of the text smaller with custom CSS but how do I make sure the PRICE box smaller

and

also some of the text is outside the boxes in the search feature on the home page

http://testsite.yazoogle.com.au

below is the CSS I have added so far

.adverts-list .advert-img {
background-image: url(http://testsite.yazoogle.com.au/wp-content/uploads/2016/02/bk0005.jpg);
}

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

.entry-content h1 {
font-size: 20px !important;
}
.entry-content h2 {
font-size: 15px !important;
}

.entry-content h3 {
font-size:12px !important;
}

.entry-content p {
font-size:12px !important;
}

.site-logo {
margin-bottom: 20px;

• This topic was modified 10 years, 5 months ago by Joanne Smith.

[Tom]

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!

[Joanne Smith]

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

• This reply was modified 10 years, 5 months ago by Joanne Smith.

[Tom]

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?

[Joanne Smith]

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

[Tom]

Ah, this should help:

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

[Joanne Smith]

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 reply was modified 10 years, 5 months ago by Joanne Smith.

[Tom]

This might help:

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

Happy to help! 🙂

• This reply was modified 10 years, 5 months ago by Tom.

[Joanne Smith]

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

[Tom]

I adjusted the CSS above 🙂

[Joanne Smith]

yes – PERFECT — thank you so VERY much!!

Joanne

[Tom]

You’re welcome 🙂

[Author]

Posts