WordPress.org

Ready to get started?Download WordPress

Forums

How to Get this site to look better on a mobile site? (8 posts)

  1. mixmastermichael
    Member
    Posted 2 years ago #

    Hi There,

    I am using the 2011 theme, for some reason when you condense the site, it does not look good on a small monitor or mobile device.

    http://civistacareers.org/support

    Does anyone know of a way that I can fix that issue and that the content looks better or correct on a mobile / smaller monitor??

    Any ideas would be greatly appreciated.

    Thanks!

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    main reason - you are using fixed width css elements in a flexible theme (based on percentage width values).

    quite important: please do not edit Twenty Eleven directly, but create a child theme to work with http://codex.wordpress.org/Child_Themes

    an unedited default theme Twenty Eleven is needed in the case of problems.
    a child theme will also help to keep any customisations during an upgrade.

  3. mixmastermichael
    Member
    Posted 2 years ago #

    yeah, I have a fresh / clean version of the 2011 theme on backup in case things go wonky, and just edit the main one directly. But thanks for the tip, will keep that in mind for the future.

    So would you recommend that I use percentages instead of pixels?? would that work?

  4. Laopi
    Member
    Posted 2 years ago #

    As per my experience, percentage works better.

  5. mixmastermichael
    Member
    Posted 2 years ago #

    yeah, changing stuff to percentage... kind of got it to work better... what a mess though. Going to try and stick with percentages from now on.

    when you make your browser window really tiny, does anyone know how I could get the "welome" box to appear the same width / margin as the green box on my home page?

    http://civistacareers.org

    Thanks

  6. Laopi
    Member
    Posted 2 years ago #

    I am not sure this is the best solution but at least I think it should worK

    If you look at your code, you will see that one is a :

    <div class="title">Welcome</div>
    <div class="title_links"><a href="areas-of-talent">Areas of Talent </a></br> <a href="http://www.ummsphysician.jobs/opportunities/index.html">Physician Applicants</a></br><a href="https://www.healthcaresource.com/cvmc/index.cfm?fuseaction=login.main">Check application status</a>

    The Welcome box is a "class="title_links", the green one is a class="title_links"

    So, if you can turn it to be :

    <div class="<strong>title_links</strong>">Welcome</div>
    <div class="title_links"><a href="areas-of-talent">Areas of Talent </a></br> <a href="http://www.ummsphysician.jobs/opportunities/index.html">Physician Applicants</a></br><a href="https://www.healthcaresource.com/cvmc/index.cfm?fuseaction=login.main">Check application status</a>

    [Please post code or markup snippets between backticks or use the code button.]

    it should work.

    For the coding, I can suggest to use Tryit Editor. It is an excellent tool that helps to see the effects of your modification. I am using it on my site and I think it is perfect.

  7. mixmastermichael
    Member
    Posted 2 years ago #

    Awesome! Thanks, that got me on the right track :)

    Just one more thing... does anyone know of a way to make text smaller when a width of a window is collapsed?

    For example, that "Welcome" Text is just too big when the window is super narrow... anyone know of a way to make it so that it's smaller when the window is smaller?

    It's at: 37px right now, I don't think percentages work on fonts...

    lil help on that?

  8. Laopi
    Member
    Posted 2 years ago #

    Hi,
    There is what you are looking for Here.
    I made some tries but don't succeed up to now.
    If you find the solution, please post it here I'll be interested too. If I find a sol, I'll post it too.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.