Twenty Eleven CSS handcoded to mobile version.

  • Anthyx

    (@anthyx)


    8 years, 11 months ago

    Hi ,

    I have a twenty-eleven based website (yes, I use a cusom child theme).
    My pages have fixed dimensions and are created using CSS code.

    I need to create a mobile version for each page of the entire site. Since each page is in custom CSS I don’t think there is a plugin that can help me.

    Keep in mind that I use Polylang t switch between two languages.

    Have you any suggestion on the best way to deal with all this?

    Many thanks in advance.

    Antonio

Viewing 7 replies - 1 through 7 (of 7 total)
  • martcol

    (@hotmale)

    8 years, 11 months ago

    I thought that Twenty Eleven was responsive and as such should adapt to mobile devices?

    Can you post a link to your site so that people can take a look?

    Thread Starter Anthyx

    (@anthyx)

    8 years, 11 months ago

    Yes, it’s responsive, but since I prefered to customize the site using a fixed size for pages and customized layout using CSS, I think I have lost that feature.

    Anyway, the address is: http://www.webfoodculture.com

    Many thanks!

    martcol

    (@hotmale)

    8 years, 11 months ago

    .one-column #page {
  max-width: 1000px;
  min-width: 1000px;
}

    First thing to suggest is to remove min-width where you see it.

    If you want to test it, just comment it out first:

    .one-column #page {
  max-width: 1000px;
  /*min-width: 1000px;*/
}
    Thread Starter Anthyx

    (@anthyx)

    8 years, 11 months ago

    Done, you can see the result: whenever I access the site from a mobile device or just resize the browser window in a normal screen:

    1) the right, small column jumps to the bottom of the left one.
    2) the navigation bar shrinks and link buttons have a strange behaviour.

    I was asking myself: can I fix the first problem assigning relative (percentage?) dimensions to the columns width? If so, how should I deal with the images that have a fixed dimension as well?

    About the second issue I’ve not the slightest idea.

    martcol

    (@hotmale)

    8 years, 11 months ago

    Next, you have a block of text in a div that has an inline style with a declared width. The text starts like this:

    Welcome to WebFoodCulture! Main purpose of this site is to examine the argument “food” from a new point of view: culture. A new perspective,

    Remove the max-width.

    Thread Starter Anthyx

    (@anthyx)

    8 years, 11 months ago

    Ok, removed. Now the introduction text resizes according to the page dimensions.

    Thread Starter Anthyx

    (@anthyx)

    8 years, 11 months ago

    I’ve tried to fix the page using percentages instead of absolute pixel values and I’ve realized that my design (one big column on the left and a smaller one on the right) does not work well this way: everything keeps to get smaller and smaller, in the end (on iPhones, for example) looking not so good.

    Don’t you think it would be better to use media queries and design a few (2/3) basic layouts in CSS for each page? Please let me know, thanks a lot!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Twenty Eleven CSS handcoded to mobile version.’ is closed to new replies.