Community Forums › Forums › Archived Forums › Design Tips and Tricks › Mobile responsiveness
- This topic has 25 replies, 3 voices, and was last updated 9 years ago by emasai.
-
AuthorPosts
-
March 24, 2015 at 7:16 am #145451sinounMember
Hey all,
I hope someone can help me. Because I made the logo area bigger, the responsiveness doesn't work as well for the header now. Everything works great above 1360px width. Below 1360px, I think the header would look great if the menu tab links went under the logo like it does starting at 1023px width.
I tried copy and pasting and moving the CSS codes around, but it just wouldn't work for me. Does anyone have any suggestions? I just want the menu to move UNDER the logo at 1359px width and below.
The theme I am using AgentPress Pro. The site I am referring to is marshallberchandassociates.com - password is 'berch'.
I appreciate your help!
SinounMarch 24, 2015 at 1:09 pm #145520emasaiParticipantIn media queries, change your .site-header .widget-area to 100% width, float: left and text-align: left
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 24, 2015 at 6:28 pm #145560sinounMemberYou are a lifesaver! Before your help, I spent hours trying to figure out which CSS code to add and couldn't figure it out. Your suggestion works great! 🙂
I have another question... how do I center the logo now? If you look at it under 1360px width view, you'll see what I mean.
Thank you!
SinounMarch 25, 2015 at 8:59 am #145597emasaiParticipantWrite a rule for .title-area at 1360px
float: none;
margin: 0 auto;
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 25, 2015 at 12:02 pm #145635sinounMemberHi there,
I tried adding:
.title-area { float: none; margin: 0 auto; }
at 1360px and 1180px and it didn't do anything. Maybe I'm missing something. Any suggestions?
March 25, 2015 at 12:11 pm #145636emasaiParticipantRemove the float: left on line 30
If you add specific rules at 1360 you do not need to add the same rules again at a lower width, they will automatically cascade. The only reason to write new rules is to modify the ones higher up which cascade down.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 25, 2015 at 1:26 pm #145644sinounMemberHi,
Thanks for letting me know about the cascade, I didn't know that.
I removed the float: left and added this back:
.title-area { float: none; margin: 0 auto; }
Still not working for me. Not sure why.
I appreciate your help.
Sinoun
March 25, 2015 at 2:11 pm #145652emasaiParticipantRemove the float: left on line 30
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 25, 2015 at 2:14 pm #145653sinounMemberHi there, I thought I removed the float: left, but apparently you're still seeing it. On line 30 of my CSS file is not what you're obviously seeing. Can you copy the set of code that shows "float: left" that I need to delete? I appreciate the clarification.
March 25, 2015 at 2:23 pm #145657emasaiParticipantI'm still seeing float: left on line 30
.title-area { background-color: #1a212b; float: left; max-width: 461px; padding: 20px 40px;}
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 26, 2015 at 12:15 pm #145736sinounMemberThank you SOOO much! 🙂 It worked great!
I have another question and then I'll get out of your hair. So as your screen gets smaller, to about 1180px, the Soliloquy slider's caption begin to get to too close to the header. I found the code that changes it:
.soliloquy-container .soliloquy-caption { bottom: 200px!important; }
I changed it to 100px and put it in the @media for 1180px section, but it doesn't work.
I already have the code above in custom CSS outside of @media, so it could be causing the problem. The problem is that if I take out "!important" it doesn't work, but then it'll work for @media 1180px. How do I handle this? I need to be able to move the caption around.
Thanks!
SinounMarch 26, 2015 at 4:58 pm #145746sinounMemberOne more thing. I'm not sure why, but anything under 1360px, the area below the search widget and above "Featured Properties" is huge. I can't figure out the CSS here. Do you know what it is?
March 27, 2015 at 8:03 am #145811emasaiParticipantThe css rules in the custom css file that you have load last and therefore override the rules in your style sheet.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comApril 9, 2015 at 9:06 am #147211sinounMemberHi Emasai,
Sorry to bother you again, but you were so helpful and everything was working great for me. Just recently, I realized that the left align for the logo went right back! I tried to check the old code you told me to look out for:
.title-area { background-color: #1a212b; float: left; max-width: 461px; padding: 20px 40px;}
But the "float: left" is NOT there anymore. Why did the logo go back to the left? How do I fix it to be centered again? I tried checking my current CSS and Firebug, and I'm stumped!
Thanks for your help!
SinounApril 10, 2015 at 8:23 am #147322emasaiParticipantYou have added extra rules to either your style sheet or your custom style sheet. There are declarations for .title-area on lines 23, 24 and then again on lines 1046 and 1053. Remove the second set of rules and add margin: 0 auto; to line 24
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comApril 10, 2015 at 8:29 am #147325sinounMemberThanks for the response! Would you mind telling me what exactly the second set of rules are that I need to remove? I don't see the same lines as you because they are in a custom style sheet. Thanks.
April 10, 2015 at 8:37 am #147327emasaiParticipantThese are the two lines to remove
.header-image .title-area { width: 320px; padding: 0; } .title-area { background-color: rgba(255, 255, 255, 0.1); float: left; padding: 20px 40px; max-width: 320px; }
Add margin: 0 auto; to this rule
.header-image .title-area { padding: 0; width: 461px; }
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comApril 10, 2015 at 9:01 am #147329sinounMemberThis is weird. This is what I have in my custom style sheet:
.title-area { background-color: #1a212b; max-width: 461px; padding: 20px 40px; }
.header-image .title-area { padding: 0; width: 461px; }I don't have any of the code in my custom style sheet that you told me remove.
April 10, 2015 at 9:45 am #147341emasaiParticipantAdd the margin: 0 auto; to the second rule. Then look in your style.css file for the lines I mentioned.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comApril 10, 2015 at 9:52 am #147344sinounMemberI added margin: 0 auto; as instructed. Then I removed the 2 lines of code you pasted above. That didn't go so well because it then made the full size site have a centered logo. I only need it centered for any screen under 1360px. Any suggestions?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.