Motif theme – How to scroll less?
-
Hi there,
I can’t figure out how to resize the background of my blog (the green part). I wan’t to reduce its height so that visitors don’t have to scroll that much to see the content.
Could you help me with that?
Marine
The blog I need help with is: (visible only to logged in users)
-
-
Add the following to the end of your existing CSS if the above is what you are wanting to do.
.site { margin-top: 0; } .site-branding { padding-top: 0; } -
Sorry, actually use only the first rule above, not the second. The second ends up cutting off the top edge of your logo at narrower screen widths.
Try the first and see what you think.
-
-
Thanks for these tips!
The result with the first one only is not enough AND, with the two of them, it’s perfect on my laptop screen but cropped on my iPad mini.
Is there an inbetween solution (I’ve tried to change the figures but it’s not working!)?
-
Let me work on things a little and see what I can do. I may have to change some of your custom CSS to get things to work on both.
-
-
Well, this may have been easier than I thought. In .site-image rule, change “bottom” to “top” so that it looks like this and give it a try.
.site-image { background: url("//orangemediatique.files.wordpress.com/2014/09/logoomdeuxcompetencesavecdrink4.png") no-repeat scroll center top / 100% auto rgba(0, 0, 0, 0); height: 200px; }Also, remove this rule from your CSS since you have a later rule that overrides it with a setting of height: 200px;
.site-image { height: 100px; } -
I’ve tried and, now, on my laptop screen, there is too much space between the header and the navigation menu.
On my iPad mini screen, the bottom of the header is cropped (before, it was the top)!
-
There are so many things going on with the header and the media queries that this is going to take a bit to figure out. Instead of adding more, I would like to redo the header related stuff and see if I can get things to work more cleanly with less CSS. I’ll work on this and post back here with what I come up with. It might be tomorrow (Thursday).
-
Ouch, I didn’t think it would be so complicated! Sorry for the inconvenience and, again, merci beaucoup!
-
Ok, let’s try fixing what we have now. Remove this from the end of your CSS:
@media screen and (max-width 336px){ .site-image{ height:35px; } }Replace the 768px and 480px Media Queries with the following and see what you think.
@media screen and (max-width: 768px) { .site-image { height:100px; margin-top: 20px; } } @media screen and (max-width: 480px) { .site-image { height:80px; margin-top: 10px; } } -
Hi!
So, I’ve tried these media queries but I can’t see any difference.
May be I’ve done something wrong? -
Sorry about that, It appears like I might have grabbed the wrong code. Give the following a try instead.
@media screen and (max-width: 900px) { .site-image { height: 160px; } } @media screen and (max-width: 768px){ .site-image{ height:120px; margin-top:20px; } } @media screen and (max-width: 480px){ .site-image{ height:80px; margin-top:10px; } }I’ve added an additional media query at 900px also.
-
-
- The topic ‘Motif theme – How to scroll less?’ is closed to new replies.
WordPress.com Forums 