mobile site responsive blog page sticky photos

betweensummerandwinter · Member · Dec 6, 2016 at 2:56 am
Copy link

Add topic to favorites
I would like my blog page to be more vibrant. Right now it’s a lot of white space around and I would prefer that it looked like the Gema theme where you can see all of the posts and featured photos in blocks instead of in a scrolling list.

I also would like to make my mobile site responsive so that it looks just like it does on the computer on mobile.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 6, 2016 at 7:50 pm
Copy link
Hi there, first off on the following custom CSS rule, change visibility:hidden to display: none; With visibility hidden, the element is still there and holds space whereas with display: none, it is not.
```
footer.entry-meta {
	display: none;
}
```
Add the following to your custom CSS and see what you think. This puts your posts into two columns. You will notice some wackiness in the alignment, but some of that is due to the different lengths for the posts. You may want to go into Customize > Content Options and set it to show post excerpts instead of the full posts, which will make all of the posts virtually the same length and the wackiness will mostly go away. It will also take care of the double image issue.
```
@media screen and (min-width: 768px) {
	#archive-container {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-around;
	}
	#archive-container .hentry {
		width: 45%;
	}
	#archive-container .hentry h1.entry-title {
		font-size: 3rem;
		line-height: 1.5 !important;
	}
	#archive-container .hentry .entry-main {
		width: 100%
	}
}
```
I’ve used a Media Query to limit the double columns to screens/windows 768px and wider so that on smaller screens the content does not get too narrow to easily read.
securitywithcortez · Member · Dec 20, 2016 at 9:47 am
Copy link
I am having a similar issue in regards to mobile responsiveness. It seems that viewing my site on a tablet or smaller size device makes my pages almost unviewable. The background image is oversized and doesn’t stay static, the content is mushed into the very middle of the page and you have to scroll forever because each line only has a couple words on it, and many other random errors. My domain is internetsecurityforbeginners.com

Thanks!
thesacredpath · Member · Dec 20, 2016 at 6:52 pm
Copy link
Hi @securitywithcortez, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.

I’ve looked at your site on my iPhone and see you have created some CSS classes for various things you have put into the panels. As an example on the no-script rule, I see you have set a width of 40%. That is a static width, and will be only 40% of the width of any screen/window. What I would suggest would be to set a max-width of something like 300px and then a width of 100%. That way the no-script element would never be more than 300px in width, but would stay as wide as it could up to that point.

We can get into this more in your new thread.
thesacredpath · Member · Dec 20, 2016 at 7:00 pm
Copy link
@securitywithcortez, I did notice one lone ending bracket in your custom CSS and removed that since it can cause problems.
securitywithcortez · Member · Dec 21, 2016 at 12:19 am
Copy link
Hey thesacredpath. Thanks for responding to me. Here is the link to my new thread. my thread
betweensummerandwinter · Member · Jan 6, 2017 at 9:27 am
Copy link
Thanks for the help. I put that in and it worked for a few posts but then it gets all crazy towards the bottom of the page. Anyway to fix this? And is there a way to have three columns and to use up more of the white space?

I also would like to get rid of the comment boxes all the together if that’s possible.
thesacredpath · Member · Jan 6, 2017 at 8:57 pm
Copy link
Hmmm, it appears as if infinite scroll may be causing us issues. I’ve tried some additional CSS added to what you have and it is still not working as well as it should. Go into your Settings and turn off infinite scroll and save and then check things again and let me know.

No items found.