We help IT Professionals succeed at work.

remove exceesive top margin on sidebar on mobile

105 Views
Last Modified: 2017-06-15
I am trying to position the right sidebar so that it looks good on desktop AND mobile.  Ideally, I would like the "No obligation quotes" (in the right sidebar) to be even with the top of the trio of photos in the left.  When I get it looking good on desktop, the mobile version gets a huge gap.  Any advice would be great!

Beta site
http://8a7.a2f.myftpupload.com/about-us/
Comment
Watch Question

Mukesh YadavFull Stack Developer
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Unfortunately, that did not move the sidebar down on desktop.  Plus, the mobile version still has too big of a gap between elements.
https://screencast.com/t/qktLiVl0

I tried changing margin:top to 60px and it still doesn't show any change on desktop.  I dumped cache and viewed in private window.  No change.
Mukesh YadavFull Stack Developer
CERTIFIED EXPERT

Commented:
Can you share the updated code?
I can't see the updated code on the link you shared in your question.

Author

Commented:
I want to move ENTIRE sidebar content down and not increase the white space between the widget text items.  When I modify .sidebar, it applies that top padding or margin to ALL sidebar text elements.  

I modified this but it still impacts all elements

.sidebar-primary {
    margin-top: 70px;
}

Open in new window

Author

Commented:
Sorry, here it is.
@media only screen and (max-width: 1023px) {
 .sidebar .widget {
    padding: 30px !important;
    margin-top: 60px !important;}
  
  .sidebar-primary {
    margin-top: 70px;!important;
}
}

Open in new window

Full Stack Developer
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
My mistake on the error on the code.

I put in what you advised and saw no difference.

I then modified the code to the following and still see no difference.
@media only screen and (max-width: 1023px) {
 .sidebar .widget {
    padding: 30px !important;
    margin-top: 10px !important;}
  
  .sidebar-primary {
    margin-top: 10px !important;
}
}

Open in new window


You can tell by this screen shot that the widget is still sitting flush left.  The left margin should be 30px and I am not sure why it is displaying incorrectly.

https://screencast.com/t/HFoSStcdkk

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions