Need help? Check out our Support site, then


Width problems

  1. Hi Guys,

    I've been trying some things in css to improve my website, but I am a beginner so not everythings working as I would like it too. I've broadend the width of the text on the page, but the text is given me some problems:

    http://acupunctuurpraktijkutrecht.wordpress.com/wat-is-acupunctuur/introductie/

    For example: I can't get the "dit geldt niet" on the second tab down under the bold title and I think it has someting to do with my beginners css. Here is what I have written in css:

    .singular.page .hentry {
    padding-top: 0;
    margin-top: 0;
    width: 1000px;
    text-align: justify;
    }

    .entry-title {
    padding-top: 20px;
    padding-bottom: 0;
    margin-bottom: 0;
    }

    #primary {
    float: none;
    width: 20%;
    }

    The blog I need help with is acupunctuurpraktijkutrecht.wordpress.com.

  2. I think it has someting to do with my beginners css.

    The best way to test that would be to go to Appearance → Themes → Customize → CSS and temporarily remove all of your custom CSS and check to see if the problem goes away. Don't save changes, just check the live preview.

    For example: I can't get the "dit geldt niet" on the second tab down under the bold title

    Do you mean inside the menus? I did noticed that you started setting up a custom menu, but you did not apply it on the Appearance → Menus → Manage Locations tab. Or did you change this already and I'm just looking at a newer version of the site?

  3. Hi,

    I allready found a way to fix it in the mean time. Does my css seem ok or have I written conflicting things? Before my site also worked on mobile phones but now its all jumbled up. Is there a way to fix this?

    Daan

  4. Does my css seem ok or have I written conflicting things? Before my site also worked on mobile phones but now its all jumbled up. Is there a way to fix this?

    It doesn't really conflict with anything so much as it simply doesn't take into account responsive design, or how the full site will display on mobile.

    There are a few ways around this. One is to use WordPress.com's built in mobile theme:
    http://en.support.wordpress.com/themes/mobile-themes/

    Another is to adjust your custom CSS so it is responsive. Doing this takes time to learn, and I would recommend searching for a tutorial to learn more if you're interested in getting further into it (which could be fun!). :)

    Here is an example to get you started. Replace this custom CSS you have now:

    .singular.page .hentry {
    	padding-top: 0;
    	margin-top:0;
    	width:1000px;
    	text-align:justify
    }
    .entry-title {
    	padding-top: 20px;
    	padding-bottom:0;
    	margin-bottom:0
    }
    #primary {
    	float: none;
    	width:20% }

    With this:

    .singular #content, .left-sidebar.singular #content {
    	margin: 0 2%;
    }
    .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
    	width:100%;
    	text-align:justify
    }
    .singular.page .hentry {
    	padding-top: 0;
    }

    Then view it at a small browser window width or on mobile—it should look a bit better than the hard coded spading (like 1000px width) that you hade before.

    Also note that you can change the values like "2%" and "100%" in the example to make adjustments.

    For the header image, this is an example of a media query, or @media rule, that is used in responsive design. It adjusts the header background image to fit to the container width when the browser window size is 680px or smaller. Hiding the site title ad small screen width takes care of some of the extra spacing that appears when you use this method together with your other custom CSS:

    @media (max-width: 680px) {
    	#branding {
    		background-size: contain;
    	}
    	#site-title {
    		display: none;
    	}
    }
  5. protectionofcivilians
    Member

    Thanks so much for your help!!!

Topic Closed

This topic has been closed to new replies.

About this Topic