Question about home page
-
Forget it. I’ve decided to go a different route.
I do have a two questions about my MOBILE site, though…
1) Why is my menu not appearing in top left corner?
2) Why is my main headline so far below the site title? -
Sorry we couldn’t make the Link posts do what you wanted them to in Hive.
1) Why is my menu not appearing in top left corner?
I’m not seeing that on my iPhone 5s or iPad Air 2. What phone/mobile device are you not seeing the menu icon on?
2) Why is my main headline so far below the site title?
The breakpoint where this seems to become an issue is below 1000px in width. Add the following two Media Queries to the bottom of your custom CSS and see what you think.
@media screen and (max-width: 999px) { .site-content { padding-top: 0; } } @media screen and (max-width: 767px) { .entry-header { margin-top: 0 !important; } } -
No problem on “Links” post style. Working around it.
I fixed the menu icon on mobile. I had screwed it up messing around with CSS (why I come to you guys haha).
That CSS worked for mobile spacing! Thanks!
A couple more questions…
1) Can I make the entire menu (including social icons) scroll down as I move down the screen ON MOBILE ONLY? Right now, it’s only the Menu Icon moving. I want a full white bar to stay atop the screen that shows the social icons, too. For better visual & functionality purposes.
2) See current front page of website (www.grandstandnews.com). I want all of my images to stay within the confines of the vertical lines. How do I add another line to third column (after U.S./Political News / before Clinton News)? How do I make it where images are autosized to always stay within vertical lines when posted/updated?
-
I found the CSS code to add the third vertical line… but I’m not really happy with the structure of the page. What are your thoughts? Images and lines seem to overlap, crosscut into each other at some points. My aim is to try and get everything to fit into 4 pretty little boxes so I can fill with content lol.
Any advice?
-
Fixed spacing between columns! Any help on the image sizing? I’m fine with manually resizing images each time… just a tad tedious. Any code that will make all images adopt one size for uniformity purposes?
-
And the mobile theme menu question a few posts back, as well! Forgot about that – thanks. No rush on response.
-
1) Can I make the entire menu (including social icons) scroll down as I move down the screen ON MOBILE ONLY?
@media screen and (max-width: 999px) { .toolbar { position: fixed; background-color: #fff; } }2) … How do I make it where images are autosized to always stay within vertical lines when posted/updated?
I see that a custom CSS rule you have is causing the images to be less than full width when things go to a single column at 767px and narrower. This media query will make the images full width at 767px and narrower. Make sure and paste this in at the very bottom of your custom CSS os that it overrides the previous rule.
@media screen and (max-width: 767px) { .home .content img { width: 100% !important; } } -
-
How do i make the website as full screen. Right now it has space on both the sides.
On my website?
-
Hi @ishdass2006gmailcom, 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.
-
Is there a way to get my text (specific text) to flash on my page? For instance, in the first column, I want the text bolded red to flash. Not the “BREAKING NEWS” header text, but the text below in the column that’s bolded red.
I know, I know… it’s not recommended. But can it be done?
-
Yeah, we can do that, but a caveat first: Support in Internet Explorer starts at version 10, so anyone on a version before that will not see the animations.
This is a bit of a touchy thing due to the way things are done on your main page. Make sure and check this in IE, Chrome and Firefox. After you get it done, post back here and I can check and make sure it’s working in Safari.
.home #post-4933 .listing-item:first-of-type .content h2 { animation: blinker 1s linear infinite; -webkit-animation: blinker 1s linear infinite; -moz-animation: blinker 1s linear infinite; -o-animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0.4 }; @-webkit-keyframes blinker { 50% {opacity 0.4}; @-moz-keyframes blinker { 50% {opacity 0.4}; @-o-keyframes blinker { 50% {opacity 0.4}; } -
Cool! Looks like it works for IE, Chrome and Firefox. For the record, I was wanting specific text in the post to flash… is there a way to target that instead of just the headers? Although, I do like the header flash. I don’t think I’d mind sticking with just the header flash if I can’t target the individual text.
-
You could add span tags around the text in the post and then add a CSS class to that span and the words would flash. Something like this.
<span class="blink">the words you want to blink</span>
All the code above would remain as is, but in the first rule, the CSS selector would be .blink like this..blink { animation: blinker 1s linear infinite; -webkit-animation: blinker 1s linear infinite; -moz-animation: blinker 1s linear infinite; -o-animation: blinker 1s linear infinite; } -
Everything working great! Thanks!
I think I’ve asked this probably multiple times before (in this thread), but is there no way to widen the page? I feel like there’s padding/margin on both sides that could be removed…
-
There is some padding on the .site-main div. Add this to your custom CSS and then adjust the 7.5em left and right padding values as desired.
.single .site-main, .page .site-main { padding-left: 7.5em; padding-right: 7.5em; } -
-
-
Is there a way to add this countdown clock to the top left corner of my website? Or maybe one of the margins?
-
Hi @zacheryhenry, that countdown clock wouldn’t work here, but you could use the Milestone widget to count down days:
- The topic ‘Question about home page’ is closed to new replies.
WordPress.com Forums 