nsitedesigns
asked on
eliminate large gap in widget on small screens
The right sidebar wraps below the main body copy on smaller screens. When it does, there is a large gap between the sidebar (which is now at the bottom of the screen) and the main body copy. How do I reduce that gap?
screen shot
https://screencast.com/t/KQreV5yA5A
beta page
http://e98.417.myftpupload.com/rad-structures-services/
screen shot
https://screencast.com/t/KQreV5yA5A
beta page
http://e98.417.myftpupload.com/rad-structures-services/
When I look at your beta page, I see that the gap is caused by the following CSS:
wp-content
->themes
---->monochrome-pro
Set that to 0px, and see if that fixes the issue for you. To be certain that it isn't affecting anything else, check your page at different sizes. You may need to more narrowly focus the CSS via media calls with different max-widths set to achieve perfection.
@media only screen and (max-width: 1023px)
style.css?ver=1.0.0:2359
.content-sidebar .content, .sidebar-content .content {
margin-bottom: 80px;
}
On line 2360 of the file style.css located in the following folder structure:wp-content
->themes
---->monochrome-pro
Set that to 0px, and see if that fixes the issue for you. To be certain that it isn't affecting anything else, check your page at different sizes. You may need to more narrowly focus the CSS via media calls with different max-widths set to achieve perfection.
ASKER
I added the following to my css and it had no effect. I even tried using a private window. No change.
@media only screen and (max-width: 1023px) {
.content-sidebar .content, .sidebar-content .content {
margin-bottom: 0px; }
}
Read my comment above, and alter the specific line and file that I specified. Let me know if that works.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window
Modifying or removing that will remove the extra white-space.