-
Posts
-
Hi- site address in reply. I need the orange consultation box in my footer to be take up the entire widget space in the footer and line up with both the top/bottom of the space. I have applied the css below to eliminate any top/bottom footer space, but there are two issues.
#footer { padding: 15px 0 0px; z-index: 1; } #footer .widget { margin: -20px 0; padding: 0; }Issues:
1. #footer css is not removing the bottom space, even when I add !important2. #footer .widget code seems to not work correctly in chrome. I need that code, though, in firefox to move the footer widgets up.
Are there other areas in the theme where styles are applied that I need to be aware of? any thoughts on how I can remove the space below the orange box that I have now, but still make it look correct in all browsers?
Thanks!
AngieHey!
Please add following code to Quick CSS instead
#footer { padding: 15px 0 20px 0; }Best regards,
YigitHi Yigit! Thanks for sending this. When I put this in, it is still not appearing as a change on the page and it’s not showing up in firebug as having been applied.
Another issue I see is that when I go to landscape or portrait in Chrome on the IPad my menu text is messed up. However, I am not sure how to look at that css on the Ipad to fix it. Do you have any ideas? If I apply your thoughts in the quick CSS will they show up?
Very strange, huh? Never had issues like this before- thanks for your ideas. :)
Angie
Hi!
Pease change the code to following one
#footer { padding: 15px 0 0; }Can you post a screenshot from your ipad and show the issue?
Cheers!
YigitWonderful! That padding worked in FF, but it’s not working for chrome or on the ipad. Here’s the screenshot of the ipad so you can see how it’s cutting off the footer. http://grab.by/vVw6
I also need to figure out how to set the margins between the border and the text links, so that they don’t move down a line. Right now, the margin is like this: margin-left: 90px;. In that format, it works fine in FF, but I’m sure it looks horrible on other screen sizes/browsers. I should set it to a percentage, right? Any thoughts are helpful! :)
Thanks, Yigit!
AngieHi– what you’re seeing is the cut off version. See how the realty executives logo is not full and the orange box is not centered top to bottom? I added a height to the css to force it to work, but in FF, the height has to be set at 118px; and in chrome the height has to be set at 102px; I have it correct right now in FF, but how do I add a height to the css to allow it to show up correctly in ff?
Also- in chrome on the ipad, the footer text why vosburgh, success stories, and home search are moved to two lines. How do I set the margins on these words to ensure that smaller screen sizes see them as I would like?
As always– I really appreciate your help. :)
Angie
Hi– The view that you show is in chrome on a laptop/desktop. In FF, the bottom of the orange box is right on the white line. In Chrome, the bottom of the orange box is 16 pixels off. I just need to know what css to add to make the bottom of that orange box sit on the bottom line in both browsers. My client wants the box sitting on the bottom line in both browsers, but the css I add seems to not be working.
Also- in chrome on the ipad, the footer text why vosburgh, success stories, and home search are moved to two lines. How do I set the margins on these words to ensure that smaller screen sizes see them as I would like?
Thanks for you time and help. :) This is the very last step in this project, so we’re anxious to wrap it up. :)
AngieHi!
Do you mind creating a temporary admin login and posting it here privately so we can take a look?
Cheers!
YigitHi!
Please flush browser cache and review your website. You can find the custom CSS code i added on the top of Quick CSS section.
Best regards,
YigitHi Yigit- Thanks for adding that code.
I’m seeing two things now on chrome on my ipad– at both landscape and portrait the menu covers the logo or is not spaced the same as the desktop version.
Second- after flushing the cache the orange box is still not flush with the bottom white line and the text in the footer is still moving down to the second line.
Thoughts on those two things?
Thank you, thank you, thank you for all your time! :)
AngieHi!
Please go to Enfold theme options > Header > Mobile Menu and choose to display at 990px
This is how it looks on my end on both Chrome and Firefox http://i.imgur.com/sY5BmzY.png
If you can, please try checking your website on another computer using ChromeRegards,
YigitHi- That worked with the header and the footer height is now working on all browsers. My very last issue is the margins on the individual footer widgets themselves where I have the menu links. Because they are different word lengths, so “About” is shorter than “Why Vosburgh,” I have set a different margin for each of them to keep them centered on desktop/laptop, but even when I just go down to the ipad, the text for “Why Vosburgh” is now on two lines instead of the one line I want it to be on. Is there a bit of css I can add to keep the longer word lengths on one line regardless of browser/screen width?
Thanks!!!
AngieHi!
You can decrease font size using following code
@media only screen and (max-width: 990px) and (min-width: 768px) { #footer .textwidget a { font-size: 12px!important; }}Cheers!
Yigitmy text is clipping inside the five columns of the footer. Can I reduce the space between the columns? For now I have had to reduce the font size which is not ideal :(
Hi!
Please try this in Quick CSS:
#footer div .av_one_fifth:not(.first) {margin-left: 4% !important;} #footer div .av_one_fifth { width:16.8%;}This reduces the space between columns, and increases the column widths as well.
Please let us know if you need further help!
Best regards,
Sarahthanks but I wish to reduce the spacing or increase column widths to accommodate a few extra characters.
The CSS code supplied didnt seem to make a difference?
Hi,
If the changes didn’t take effect, please try clearing your browser cache, clearing your WordPress cache, and refreshing your browser a few times.
You can also remove the code that decreases your font size, if you prefer the bigger text.
Best regards,
SarahSarah
Thanks it is so close!
I need a little more width.
When I increase the 16.8 the fifth column drops underneath the first column :(
Hi!
That’s strange, the 16.8% width works with the 4% margin-left for me. If it drops to the next line for you, can decrease the 4% margin until you get the right combination. :)
Best regards,
Sarahok awesome, but (dont you love that) the footer columns collapse poorly in mobile view.
Now we need to make sure that they fol underneath each other rather than get thinner?
Any ideas?
Thanks in advance!
Hi,
To make the modification work only for mobile devices, please put it inside this media query:
@media screen and (min-width: 1024px) { CODE HERE }for more info on media queries, please refer to this: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Best regards,
Sarah:)
OK I am now confused sorry
Please view the site and squish the browser width, the footer becomes unreadable.
my quick css looks like this, I need the footer readable at all resolutions?
/* footer columns */
#footer div .av_one_fifth:not(.first) {margin-left: 2% ;}
#footer div .av_one_fifth { width:17.8% !important;}/* footer columns mobile view? */
@media screen and (min-width: 1024px) {
#footer div .av_one_fifth:not(.first) {margin-left: 2% ;}
#footer div .av_one_fifth { width:17.8% !important;}
}
- You must be logged in to reply to this topic.