Tagged: header, responsive, slider
-
AuthorPosts
-
April 27, 2015 at 11:41 pm #435720
#1
Based on some prior posts I was able to make the phone and social icons bigger, however; I’d love to remove the extra 20 pixels below the social icons that appears when you see the hover color.#2
I made the slider taller because the graphics were appearing under the logo; however, my pink stripe slider image is not displaying under the header_meta and it looks like it’s very pixelated and stretched.#3
When resizing my screen my slider image (probably due to my positioning) is not displaying in the right space.#4
What size do you recommend the slider image be when using a transparent and glassy header?#5
Forgive me, I haven’t searched for this yet, but I’d like to add another graphic to the end of the social icons. Where should this be added?April 28, 2015 at 8:00 pm #436327#1 Resolved
#2 Initially the slider image looks fine
#3 & #4 There are responsive issues with the header, nav and slider area. I’d appreciate it if you could help me resolve these.
#5 I did get this added and styled using the secondary nav but I’m not sure this was the best way.- This reply was modified 9 years, 6 months ago by endoradigital.
April 29, 2015 at 8:37 pm #437001Hi!
3. Hmm, it seems to be displaying fine on my end. Can you take a screenshot and highlight what your trying to do with it?
4. Are you trying to make it fullscreen? If so then around 1500 x 1000 or similar size should display fine on most screens.
Best regards,
ElliottApril 29, 2015 at 9:02 pm #437043This reply has been marked as private.April 30, 2015 at 8:20 pm #437754Hey!
For the menu add this to your custom CSS.
@media screen and (max-width:1000px) { nav.main_menu { display: none !important; } #advanced_menu_toggle { display: block !important; } }
The slider looks fine to me in your screenshots though. Highlight what your trying to do with it so we can get a better idea.
Cheers!
ElliottMay 5, 2015 at 5:01 pm #439857I added your code and I’ve uploaded new images showing overlapping of a button with the social icons as well as slider text overlapping the logo.
Yes this is full screen so thank you for letting me know that 1500 x 1000 is the size we should make our images. I just have a striped placeholder in there now.
May 5, 2015 at 5:01 pm #439858This reply has been marked as private.May 6, 2015 at 5:15 pm #440484Hey!
Try adding this.
@media screen and (max-width:500px) { .container .social_bookmarks { float: none !important; } }
Best regards,
ElliottMay 6, 2015 at 6:23 pm #440557It still does the same thing. Is there maybe a different way I should have added the “Rewarding Careers” button that would help with this??
May 6, 2015 at 6:26 pm #440563I changed it to 755 and that seems better. I still have a problem with the “Messaging goes here” overlaying the logo.
May 7, 2015 at 5:13 pm #441088Hey!
That’s because your button is knocking the phone number down. I only see it very briefly when resizing the browser so I don’t think your going to have users seeing it in action.
You could use some CSS to edit it or hide it but it’s going to be tricky trying to pinpoint exactly what screen size it gets set at.
@media screen and (max-width: 800px) and (min-width: 700px) { .phone-info { display: none !important; } }
Something like that.
Regards,
Elliott -
AuthorPosts
- You must be logged in to reply to this topic.