Moving image up

livlev · Member · May 6, 2015 at 10:23 pm
Copy link

Add topic to favorites
Hi,
I’m wondering if anyone can help me. On my about me page I have an image on the right of a pot with leaves coming out of it. I really want to move this image upwards so that the stem goes off the top of the page (past my ‘portfolio’ and ‘about me’ menu items). Please can someone let me know the CSS to do this? (I can make the stem longer if need be but would be good to know the CSS for moving the image at this stage.)

Thank you!

Olivia

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 7, 2015 at 9:44 pm
Copy link
Hi Olivia, it looks like you got this accomplished. If I’m mistaken, please let me know. :)
livlev · Member · May 8, 2015 at 1:21 pm
Copy link
Hi thesacredpath.

I have sorted it thanks, although don’t know if i’ve done in the proper way (i’ve done it by adjusting the margin size).
As a result of me playing around i’ve run into a couple of difficulties. Please can you help me?

1) I have set it so the menu items float right on my about me page (so that they are always to the right of the image). However, it has meant that the items are now not clickable? I think the layers are unaligned but not sure how to fix this. Please can you tell me the CSS to fix it?

2) For browsers in between 1109px and 950px i’d like the image of the stem and pot to stay as it is in the same position, but i would like the text to be further to the left as there is a lot of white space. What CSS do I use to amend this without moving the image aswell?

Thanks,

Olivia
thesacredpath · Member · May 8, 2015 at 8:47 pm
Copy link
Hi Olivia,

1) I have set it so the menu items float right on my about me page (so that they are always to the right of the image). However, it has meant that the items are now not clickable? I think the layers are unaligned but not sure how to fix this. Please can you tell me the CSS to fix it?

We can fix this relatively easily. Find your .main-navigation rule and modify it to look like this, which brings the menu to the top of all other elements.
```
.main-navigation {
    height: 140px;
    position: relative;
    z-index: 100;
}
```
2) For browsers in between 1109px and 950px i’d like the image of the stem and pot to stay as it is in the same position, but i would like the text to be further to the left as there is a lot of white space. What CSS do I use to amend this without moving the image aswell?

This is tough, but give the following a try. The image is causing your content to be vary narrow in that range. Put this at the very end of your custom CSS so that it overrides everything before it.
```
@media screen and (min-width: 950px) and (max-width: 1109px) {
	body.page-id-272 .site {
		max-width: 800px;
		width: 100%;
		float: left;
		padding-left: 100px;
	}
	body.page-id-272 {
		float: none !important;
	}
	article#post-272 {
		max-width: 700px;
		width: 100%;
	}
}
```
livlev · Member · May 10, 2015 at 6:12 pm
Copy link
Hi thanks very much for helping. The only thing now is that when the screen width is between 950px and 1109px you can scroll left to right even though no new content is revealed. How do I disable this ability to scroll right to left?

Thank you in advance.

Olivia
thesacredpath · Member · May 11, 2015 at 3:52 pm
Copy link
I’m having problems correcting this because you have so many media queries that are overlapping. My first suggestion would be to reorganize your CSS and pull all media queries out and put them all at the very end of the non-media query CSS so that we can go through them all one at a time and get rid of the conflicts and overlaps. I would suggest pulling the media queries out starting from the top and then put them in the order they are in the existing, but down at the very bottom. You may want to copy out all of your CSS and paste it into a plain text file (textedit) and save to your desktop for safe keeping.
livlev · Member · May 19, 2015 at 3:24 pm
Copy link
Hi, sorry for my late reply.
It’s weird because when I move all of my media queries to the bottom, certain things on the site do not seem to work anymore, e.g. the images over the menu items.
This happens even though they are still in the same order as they were…?
Olivia

No items found.