How to fix page issue with mobile?

Teetime

I've finally gotten far enough along with my new site to publish. A key objective in revising my site was to make it responsive on mobile devices. For the most part, this has worked as I would hope. One nagging problem remains however, and I hope someone here can suggest a fix. On my About page it works fine on larger monitors, but experiences a weird reconfigure when the viewing width reduces below 671 pixels and the menu changes to mobile. At that point, there is a large vertical space inserted between the share icons and my photo. How is the best way to resolve this? I've tried this, but it doesn't work:

/* Move About photo up when mobile display */
@media only screen and (max-width: 670px) {
.sm-page-widget-FCZJTPwh {
    position: relative /* Declared position allows for location changes */
    top: -200px; /* Moves the image 200px closer to the top of the page */
}}

Any suggestions?

photoclick

To the left of your image you have a widget, probably a spacer (?), named sm-page-widget-12833991. It's width is set to 5%. This widget is what creates large gap in mobile view. You have two options here:

1) redesign the page without this spacer. You can simply use Margins to offset your image from the left edge of the screen OR

2)hide this widget on screens less than 671 px:

@media only screen and (max-width: 670px) {
.sm-page-widget-12833991 {display:none;}
}

I have no clue where the widget FCZJTPwh that you are referring to is on your page
mike

Teetime

Thanks Mike. Your option 2 works perfectly and makes sense to me. I originally had the page designed without the spacer and using margins. But on really small displays the fixed nature of margins overwhelmed the text columns and they would overlap each other, so I changed to the spacer which with your change now works well with all devices.