WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Kellische
    Member
    Posted 4 months ago #

    Hey,

    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 4 months ago #

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

  3. alchymyth
    The Sweeper & Moderator
    Posted 4 months 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
    Member
    Posted 4 months 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?

Reply

You must log in to post.

About this Topic