asked on

remove exceesive top margin on sidebar on mobile

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/

SOLUTION

Mukesh Yadav

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nsitedesigns

ASKER

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 Yadav

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

nsitedesigns

ASKER

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

nsitedesigns

ASKER

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

ASKER CERTIFIED SOLUTION

Mukesh Yadav

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nsitedesigns

ASKER

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