Spacing issues

  • livlev · Member ·

    Hi,

    I am have a few questions re the spacing on my site and wondering if you can help me.

    1) As you can see the top row on the homepage of my site- I have uploaded the ‘art director’ as a background image, and ‘liv lev’ as a header allowing me to treat these two things as separate entities. However, I would like it so that ‘art director’ is always top left, the ‘liv lev’ is always centered, and the menu items are always top right at all screen sizes. At the moment everything is skewed to the right. How do I fix this?

    2) As you can see i have cheated the layout abit as Spun uses circles for its posts, yet I have designed my posts as leaves. As a result of this blank space around the leaves is clickable. Is there anyway of changing it so only the stuff within the uploaded leaf image is clickable? I have uploaded these as PNG files so they should recognise there is transparent space around the outline.

    Any help you could give me would be much appreciated.

    Thank you very much,

    Olivia

    The blog I need help with is: (visible only to logged in users)

  • raulanton · Staff ·

    Hi.

    Ok, you have a responsive theme and your page width depends on the device you use to visualize your blog. So, let me start explaining you that with a desktop device. Your #page element width currently has 1000px width (for those devices wider than 1200px). Your #masthead.site-header inside #page is 775px width (for those devices wider than 950px). And most important, your three elements (‘art director’, ‘liv-lev’ and menu) are inside this #masthead, so they are confined to these 775px.

    So, first thing you will need to change your #page and #masthead width. I pass you the Custom CSS code for 100% width, but you should try several values to fit your needs. Remember you can use both pixels and percentages –among others- to fix width attribute.

    #page.site {
  width: 100%;
  margin: 0px;
}
#masthead.site-header {
  width: 100%;
}

    If your want your #content (these amazing leaves) to be aligned with your headers area you should adjust proportionally the width value. #content is also inside #page.

    #content.site-content {
  width: 100%;
}

    But, I told your theme is responsive, so the above width definition for .site is complemented with three others to be used in case your device is narrower than 600px, from 600px to 800px and finally from 800px to 1200px. I copy your current definitions here:

    @media screen and (max-width: 1200px)
.site {
  width: 600px;
}
@media screen and (max-width: 800px)
.site {
  width: 400px;
}
@media screen and (max-width: 600px)
.site {
  padding: 0;
  width: 300px;
}

    You should take into account these three additional rules and change them to your convenience… although I am afraid you will have problems with your header images for narrow devices.

    I hope this helps you.

  • raulanton · Staff ·

    And about your clickable images. I should say this cannot be done only with CSS. At least, I do not know how. :)

  • livlev · Member ·

    Amazing, it works. Thanks so much :-)

    Hoping you can also answer these next couple of questions which have come as a result:

    1) So i have fixed the header for desktop screens (i’ll probably change it for ipad and smaller), but i’m now just playing around with the amount of leaves per row depending on screen size.

    As you can see for screen sizes greater than 1222px I have 4 leaves per row, and screen sizes greater than 889 px I have 3 leaves per row. Lower than this, there are 2 leaves per row. I would like it so that I can still play around with the top/bottom/right/left CSS of the leaves, but so they always sit within a central box. At the moment they are skewed right or left most of the time. What CSS do i use to fix this?

    2) Is there any CSS I can insert to prevent the option of scrolling right to left? At the moment my website lets you scroll from side to side even though no new content is revealed.

    Thank you again,

    Olivia

  • raulanton · Staff ·

    Hi, Olivia!

    2) Is there any CSS I can insert to prevent the option of scrolling right to left? At the moment my website lets you scroll from side to side even though no new content is revealed.

    Yes. The problem right now is your content width is bigger than the screen width and in addition your #page div is 95% width, but CSS are adding with padding and margin 100px and that causes this scroll. Take a look to your responsive width definitions. In any case, try with this code, just to understand what I mean.

    div#content.site-content {
    width: 100%;
}

body.home div#page.hfeed.site {
    padding: 0px;
    margin: 0px;
}

    I would like it so that I can still play around with the top/bottom/right/left CSS of the leaves, but so they always sit within a central box. At the moment they are skewed right or left most of the time. What CSS do i use to fix this?

    I’m afraid you can ‘float’ those images, articles in your blog, to the left or to the right, but not center it. And you can’t calculate a margin with calc() because depending on the zoom you could have a different number of leaves per page… not an easy question. Let me think about, but I do not see an easy way to do it.

    The only way I see: Specify #content width always in pixels, not % and with a value 3 or 4 times wider than your images width+margin+padding (Rigth now this is 290px img+20px margin), and then center your #content: 

    body.home #content.site-content {
    width: 930px;
    margin: 0px auto;
}

    I hope this helps you! Enjoy blogging!

  • raulanton · Staff ·

    Of course, when I say “with a value 3 or 4 times wider than your images” it depends on the @screen max-width. I mean, with a max-width of 600px you can not fit 3 articles-images inside, you need to adjust widths for each one of your @screen statements.

  • livlev · Member ·

    Great, thanks so much for all your help :-)

    Just 2 more small points if you are able to answer…

    1) I’ve fixed the header and width of leaves for all sizes. My only issue is that on mobile, for some reason my header sits on the left instead of the centre. (I have designed this header especially for mobile, as the other one looked massive in comparison to the rest of the site). How do I centre it?

    2) For some reason my favicon is not coming though. It should be a leaf on a transparent background. When i uploaded it and it showed me all the different sizes it looked fine so not sure why its not working properly.

    Thank you again!

    Olivia

  • kathrynwp · Staff ·

    Hi Olivia, looks like these new questions got overlooked, did someone answer them for you yet somewhere else?

  • livlev · Member ·

    Hi Kathryn,

    No one came back to me, I would still really appreicate your help.

    Thanks

  • kathrynwp · Staff ·

    2) For some reason my favicon is not coming though. It should be a leaf on a transparent background. When i uploaded it and it showed me all the different sizes it looked fine so not sure why its not working properly.

    I’m seeing your favicon in my browser – here’s a screenshot of the tab in Firefox:

    Liv Lev Creative

    Favicons can be remarkably “sticky” sometimes in browsers. Could you try a browser where you’ve never loaded your site before and see if it appears?

  • kathrynwp · Staff ·

    I just noticed that you’ve hidden the footer credit on your site, which isn’t something that’s allowed on WordPress.com. All WordPress.com sites – even our VIP clients – must retain the footer credit to use our service. You can tweak the credit’s look and feel, as long as it’s still readable.

    Please remove this CSS to restore the credit:

    body.home #colophon.site-footer {
	display: none;
}
  • kathrynwp · Staff ·

    1) I’ve fixed the header and width of leaves for all sizes. My only issue is that on mobile, for some reason my header sits on the left instead of the centre. (I have designed this header especially for mobile, as the other one looked massive in comparison to the rest of the site). How do I centre it?

    Within this media query in your custom CSS: 

    @media screen and (max-width: 600px) {

}

    You’ve defined a 0 position for your header, but you really want “center” – so change this:

    .site-header {
		background: url('https://livlev.files.wordpress.com/2015/03/livlev-mobile-header-new2.png') no-repeat scroll 0 0 transparent;
		opacity: 1;
		padding-bottom: 91px;
	}

    to this:

    .site-header {
		background: url('https://livlev.files.wordpress.com/2015/03/livlev-mobile-header-new2.png') no-repeat scroll center 0 transparent;
		opacity: 1;
		padding-bottom: 91px;
	}

    And see if that does the trick.

    If you have any new questions, could you please start a new thread rather than continuing in this long one where they may be missed again? Thanks!

  • The topic ‘Spacing issues’ is closed to new replies.