Need help? Check out our Support site, then


Twenty Eleven: not displaying correctly on phone after changes to CSS

  1. Hi
    I have made some changes to the layout of my site tracyfox.co.uk ie moving the site title and description, removing search box etc using the css upgrade.

    Although the layout looks fine on a laptop, tablet and desktop, when I view the site on my phone the site title/description is squashed over to the left with only a couple of letters per line.

    Any help would be appreciated.

    Thanks in advance

    Tracy

    The blog I need help with is tracyfox.co.uk.

  2. I noticed you have this custom CSS:

    #site-title {
    	margin-right: 270px;
    	padding:0
    }

    But I don't think you need that big of a right margin in any view. Try changing 270px to 0

    Same goes for the "#site-description" rule, which also has 270px for "margin", just set that to 0

    Another thing you can do is use media queries to adjust some things separately for small screens. Here is an example based on your current site title (with the extra spaces in it) and tagline based on the Twenty Eleven theme:

    @media (max-width: 540px) {
    #branding #site-title a {
    	font-size: 2em;
    	letter-spacing: -.05em;
    }
    #branding #site-description {
    	font-size: 1em;
    	letter-spacing: -.05em;
    }
    }

    You might also like:
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

  3. Hi DesignSimply

    Many thanks for your reply.

    I have change the 270 value to 0 in both areas as you suggested and it has helped.

    I have been using firebug to try and identify the correct code to edit/copy/paste etc but when I changed the 270 when I was trying to move the text to the left it didn't make any difference on screen so I left it alone.

    With the margins there are typically 4 numbers but I haven't been able to find anywhere that tells you which number relates to which margin ie top bottom right left, do you know the answer to this?

    Also some values are in pixels and others in % and some in em, what are these?

    Thanks

    Tracy

  4. Hi Desinsimply

    Just to let you know that the issue of resizing everything for smaller devices isn't fully resolved.

    tracy

  5. With the margins there are typically 4 numbers but I haven't been able to find anywhere that tells you which number relates to which margin ie top bottom right left, do you know the answer to this?

    The "margin" property is a shorthand property for margin-top, margin-right, margin-bottom, margin-left, in that order.

    So this:

    margin-top: 1em;
    margin-right: 2em;
    margin-bottom: 3em;
    margin-left: 4em;

    Would be the same as this:

    margin: 1em 2em 3em 4em;

    If you're just getting started with You might also like the tutorials at http://www.htmldog.com/guides/css/

  6. Just to let you know that the issue of resizing everything for smaller devices isn't fully resolved.

    I provided some examples to get you started. :) You mentioned the site title, site description, and search box before but you didn't say what other changes you were having trouble with.

    Try making some adjustments on your own and put them inside the media query block from my earlier example. If you need help after that, please start a new help request for each issue and include some specifics.

  7. Hi

    Apologies but I am getting a little confused.....

    With regards to my site no longer displaying proportionally on small devices ie phones, I am not sure what your instructions are.

    The media query you provided, do just copy and paste this into the CSS page to fix this problem?

    I don't fully understand what this code is doing so am unsure what adjustments I would make.

    Tracy

  8. The media query you provided, do just copy and paste this into the CSS page to fix this problem?

    Not exactly. That CSS was dependent on the other custom CSS you were using at the time. Since your custom CSS has changed, that example will no longer work exactly the same way it did before and it would need to be adjusted based on the other changes you made.

    I think the best thing you can do at this point is to learn more about how media queries work. Otherwise, you'll probably continue to have trouble because any future CSS edits you make wouldn't take media queries into account and you will keep running into the same kinds of problems over and over again.

    Let's start with a different example to illustrate. Note that you don't have to save this example, just paste it into the CSS editor on the right and watch the live preview on the left after resizing your screen:

    Go to Appearance > Customize > CSS to the bottom of your custom CSS:

    @media (max-width: 960px) {
    	.entry-header .entry-title {
    		color: red;
    		font-size: 6em;
    		font-family: impact, sans-serif;
    	}
    }

    Then grab the edge of the browser window until it's smaller than 960 pixels wide. See how the CSS inside the @media block only takes effect when the window is smaller than 960 pixels?

    Next, change "max-width" to "min-width" and drag the browser size to be smaller and larger again. See how it changes?

    Now, let's look at your original help request from this thread again. You said, "when I view the site on my phone the site title/description is squashed over to the left with only a couple of letters per line." I checked it, and that's not happening any more. That's because of the other custom CSS you've added and re-adjusted along the way.

    I can help you with other issues, but first make sure you understand how media queries work (let me know if you still need help with that) and then let's address specifics because I don't have as close an eye on what changes you have made to the site over time and so I don't know exactly what to look for.

    On thing I did spot was that you added a rule to make the header image 200 pixels tall. You made that change for all screen sizes using this custom CSS:

    #branding img {
    	height: 200px;
    }

    Did you mean to only apply that rule to large screen sizes?

  9. 1. Would it be better to wait until I have made all the changes I want to the site AND THEN try and sort out the problem of how it displays on smaller devices?
    Some of the other changes I want to make are making the site the full width of the screen so there isn't any background, align the content page vertically to match the site title and menu, move the widget section over to the right so it vertically aligns with the end of the site description text etc (don't panic I will raise other queries for these!!).

    2. With regards to the height of the header image, I felt that the default size was too tall and wanted to reduce it a bit. I used Firebug to try and identify which bit would allow me to do this. I had no idea that the change was specific to screen size, sorry.
    What would the best code be to achieve what I want to do?

    As I said previously, please forgive my mistakes as I don't really know what I am doing as I am totally new to all this.

    Thank you for your help and patience.

    tracy

  10. Would it be better to wait until I have made all the changes I want to the site AND THEN try and sort out the problem of how it displays on smaller devices?

    I don't think so. I think it would be better if you were to learn how it works so you can decide how you want to apply some changes to all views and other changes to just large or small screens. Adjusting for small screens later just means twice the work in my mind.

    With regards to the height of the header image, I felt that the default size was too tall and wanted to reduce it a bit. I used Firebug to try and identify which bit would allow me to do this. I had no idea that the change was specific to screen size, sorry.

    No worries, but that's exactly why I'm trying to teach you how the change affected different screen sizes. :)

    I had no idea that the change was specific to screen size

    Exactly! The change you made to set the header image height to 200px across the board is what is making that image look stretched out on smaller screens right now. If you learn how media queries work, then you would be able to decide which updates you want to apply to all views (i.e. hiding the search box in the header is one I can think of) and which updates you want to apply to just certain screen sizes (i.e. you probably only want the header image height to apply to large screens).

    Untangling all of that later would take a lot more work in my opinion.

    If you're not interested in making those kinds of changes yourself, you can absolutely hire someone help instead. We help with basic CSS support here in this forum, but we'll often refer requests that start getting very time consuming to a design consulting service: http://en.support.wordpress.com/customize-my-site/request-theme-customization/

    It's fine to stay here in our forums, but asking to fix everything on a site to make it look better on mobile is a big ask. Learning how it works bit by bit is a better alternative, but you've got to be willing to do the work!

    What would the best code be to achieve what I want to do?

    Good question :) and I'm hoping you'll be willing to give this one a try based on my last example so you get a better understanding. If you don't, then I'm afraid you'll keep getting frustrated at every turn—also, it makes more work for me if I give you an example that works and then you reply saying it doesn't because you're not clear on what has changed when you make the next CSS update.

    I think I can help you work it all out, but I'm really hoping you'll get the media queries issue sorted enough so you understand it first.

    So, let's step back just a little. Did you try out the last example CSS I posted above? What changed? Can you see from that example how to apply a 200px header image height to just larger screen sizes? See if you can figure it out and post back here with what you find!

  11. Hi

    I really appreciate your help but feel I am a bit lost now.

    My intention was to learn how to make a few changes to make the site look more how I wanted it to.

    I think I will remove all the CSS I have added and make one change at a time and take it from there.

    Tracy

  12. I'm sorry you're feeling lost! But I can definitely help you make updates one step at a time and I really think that will help you so much in the long run.

    Another route would be to apply your past changes to large screens only and let the theme look how it was designed on smaller screens. Would that work better for you?

  13. Hi

    I think it would be best to start again from scratch.

    I have now removed all the CSS that I had added previously.

    What would be the best way to post my questions, individually or all on one post?

    Thanks for your patience

    Tracy

  14. The very best would be to group like stuff together: i.e. a few questions all about the menu or another small set of questions about the header area could each go into a separate thread. That way, it's easier to see all the CSS related to one thing at a time, it's easier for someone from support to help with one topic at a time, the back and forth conversation won't get too mixed up between topics, and it has the added bonus of possibly really helping someone else looking back at the thread later.

Topic Closed

This topic has been closed to new replies.

About this Topic