Twenty Thirteen mobile adaption fails (white space, wrong image alignment etc.) (4 posts)

  1. Kellische
    Posted 1 year ago #


    I use theme Twenty Thirteen and made a lot of changes in the style.css-file. Now it looks as I want it to look like on a computer screen, but on iPhone/iPads etc. the site-structure is a mess.

    This is the URL of the page.
    Look at this screeny I made in my iPhone, three main problems need to be solved:

    1) The toggle-menu is rolling down over the posts, there is no margin/padding etc. to make it be isolated and readable.
    2) The image and the following text (= post content) are not aligned on the left of the page but start anywhere in the middle.
    3) There is white space on the right.

    Can anyone help me how I fix these issues without changing my main design again? Where can I find the style-tags for mobile adaption?

    Thanks for your help!

  2. Andrew
    Forum moderator
    Posted 1 year ago #

    Can you replicate the same issue on the (default) Twenty Thirteen theme: http://wp-themes.com/twentythirteen ?

  3. Michael
    Part-Time Forum Moderator
    Posted 1 year ago #

    please do not edit the default theme Twenty Thirteen directly, but either create a child theme http://codex.wordpress.org/Child_Themes for the customization, or for only formatting, use a 'custom CSS' plugin http://wordpress.org/plugins/search.php?q=custom+css

    as @Andrew already hinted at, the problem does not show if one replaces your CSS with the one of an unedited theme (done with Firefox' web developer add-on).

    as is, it is too complex to identify how your edits have changed the formatting and caused your problems.

  4. Kellische
    Posted 1 year ago #

    Isn't there a dedicated file or section where I can tell the design how to behave on mobile devices? Or does it all depend on the style.css?

    I don't want to use an unedited theme, that's basically why I edited mine. But I guess the problems on mobile devices would not appear.

    E.g. there seems to be a margin to the left which fits for desktop screens but not for smartphones. Maybe someone can tell me at what tags I should take a look on?

Topic Closed

This topic has been closed to new replies.

About this Topic