Isotopic Results (mobile and desktop)

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Isotopic Results (mobile and desktop)

This topic contains 2 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #46979
    groovymarci
    groovymarci
    Participant

    Hi Ernest,

    I am using the Isotopic results layout and have a couple quick questions:

    1. On mobile, how do I get the 2-column layout to be one column (picture attached – “Isotopic Results 2-column layout – Mobile”), the images are way too small on mobile when it’s two-column.

    2. Also the font on mobile for the titles are way too big, how do I adjust the title font ONLY on mobile? (same picture attached – “Isotopic Results 2-column layout – Mobile”)

    3. On the desktop version, the results title background size is adjusted to how big the actual title is, but then all the title background colors are all different sizes and looks a bit messy. Is there any way to get the background for each title a standard size? (picture attached – “Isotopic Results – desktop title background size”)

    Thanks so much for your prompt response!

    Attachments:
    You must be logged in to view attached files.
    #46982
    groovymarci
    groovymarci
    Participant

    Update regarding question #1:

    I changed the mobile results width and height to 100%, (See attached image) which seems to have worked on Safari but not on Chrome or Firefox (I have cleared cache for both browsers). So desktop now has 3 columns and 3 rows and bottom pagination navigation. I would like mobile to have 1 column and 5+ rows (if possible)… mobile should have a scrolling feel before you get to the bottom pagination navigation. Is this possible?

    Attachments:
    You must be logged in to view attached files.
    #46995
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    1. Just checked and it looks okay on every browsers, I see 3 rows as expected. Make sure to reload the browsers at the given size (not resize from original).

    2. I suggest custom CSS for that:

    @media only screen and (max-width: 640px) {
       .asp_r a.asp_res_url {
           font-size: 18px;
       }
    }

    3. You mean that if there are multiple lines with the title? You could basically force the title to a single line:

       .asp_r a.asp_res_url {
           white-space:nowrap;
           text-overflow: ellipsis !important;
           overflow: hidden;
       }
       .asp_r h3 {
           width: 100%;
       }
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.