Readjusting elements on organisation page

hfujiwaramycj · Member · Mar 2, 2015 at 2:08 am
Copy link

Add topic to favorites
Hello!

I am currently developing our company homepage through the organisation theme, and would like to rearrange some of the elements of the “home” page of our website. I want to bring the news feed element of the homepage above the information section. I understand it‘s a possibility by adjusting the CSS, but since i am new to all of this, it would be great if someone could point me at the right sources.

Thanks again!!：D

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 2, 2015 at 6:16 pm
Copy link
Hi there, moving large elements of a page on responsive designed themes does typically not work well. If we move the News section up above the Information section, it may look alright on desktop monitors and/or laptops, but not on tablets or phones.

That said, you can give the following a try. It is a media query that repositions the New section at top for screens/windows of 768px and wider. Below 768px, the design reverts back to the original with the news below the information so that things display correctly on smaller tablets and phones.
```
@media screen and (min-width: 768px) {
	.homepage.top {
		margin-top: 640px;
		position: absolute;

	}
	#footer-widgets {
		margin-top: 550px;
	}
}
```
hfujiwaramycj · Member · Mar 11, 2015 at 1:43 am
Copy link
Hi!Thank you for your help!
It did work! I have two follow up questions regarding that.
1. Is it possible to add banners on the blank spaces to promote campaigns on the home page?

2. If i want to make the news section on the left side of the home page a scrolled feed, what can I do?

Thank you again for your input!! :D
thesacredpath · Member · Mar 11, 2015 at 8:50 pm
Copy link
We can use the following to make the new feed into a scrolled box, but it will only display the three latest posts in that section. There is no way to change that number. You can give the following CSS a try. I’ve set the height to match the section to the right and limited it to screens/windows 768px and wider so as not to interfere with display on tablets and phones.
```
@media screen and (min-width: 768px) {
.homepage .columns:first-child {
    max-height: 360px;
    overflow-y: auto;
}
}
```
hfujiwaramycj · Member · Mar 12, 2015 at 1:11 am
Copy link
Thank you for the help! :D
thesacredpath · Member · Mar 12, 2015 at 3:31 pm
Copy link
You are welcome.

No items found.