Swifty Theme and Mobile Responsiveness

Hello Whit-

For your first question, first you’ll need to add a CSS class or ID so you can target the row that contains that image. Use the blue-colored Edit Column menu, and select Advanced Controls. Then add a CSS ID, in this example I used “header-banner.”

Once you’ve got that set, you can target that row with Custom CSS, similar to this:

div#header-banner { 
 padding-left: 0px; 
 padding-right: 0px;
}

For your second question, you’ll need to switch over to the Text editor tab in your editor. You’ll see that each one of those columns is inside a <div> element that looks like this:

<div class="col-md-3 col-xs-8 col-sm-6">

These CSS classes control the width of the columns at different screen sizes. On “Medium” size screens, each column takes up 3/12 (one quarter) of the screen, on “Small” screens, 6/12 (half), and on “Extra Small” screens, 8/12 (two thirds). So, in order to make sure they fill up a small screen, change each one of those elements so that col-xs-8 is col-xs-12:

<div class="col-md-3 col-xs-12 col-sm-6">

That will fill a vertical mobile screen.