Responsive Header

I have a custom header for each of my webpages, but I'm not sure how to make them responsive for mobile devices. Right now, it's shrinking the full image to fit it on a mobile screen: http://dalaigroup.com/maryland-seo/ It should show only a central piece of the image at its full height.

The text and line elements have been added to the image until I can figure out how to write them correctly with code, as well. What might be the best way to to tackle this? This is what I have so far:

<div style="background-image: url(http://dalaigroup.com/wp-content/uploads/2017/05/Maryland-SEO-Header.png);">Maryland-SEO-Header</div>

Any suggestions are appreciated. Thank you.

You could create another image and house it in a div that only shows on xs screen sizes.

Or (and this is probably best) drag in a jumbotron component > create a new image with no text on it to be used as a background image for jumbotron > then have all your text on heading and paragraph components.

Doing it this way will be easier to edit content and it will be responsive and you can control size of text using media queries on small screens.

There are pre built components that BSS have to download by searching the online component section.

Doesn't look like you built that page with the Bootstrap Studio app this forum is for.

However, I would have to agree with Chris on using the Jumbotron component which you can see an example at the developers of the Bootstrap framework site http://getbootstrap.com/components/#jumbotron. Just add a background to the jumbotron class. The BSS app also has the Hero component which is basically a jumbotron with an already defined background image.

The initial issue you have with your site is that you have a div with the background image and then inside the div is that same image. The image is a layer over the top of any background setting you have for the div. When you put an element inside another element, you're actually layering them not necessarily stacking them. So your image is layered over the top of the div effectively blocking out it's background image.

You could give that image a style of opacity:0 which will effectively hide the image so the background image will shine through... then you can use styles such as background-size (https://www.w3schools.com/cssref/css3_pr_background-size.asp) and background-position (https://www.w3schools.com/cssref/pr_background-position.asp) to move the background image around and display as much or as little of the background image you want.

There are other ways as well such as the srcset and picture element (https://css-tricks.com/responsive-images-css/) but the jumbotron is probably best. With using media queries to load different/more appropriately sized images based on screen size.

Oh and the image resizes because you have the following CSS. Don't change it, just pointing it out.

img {
    margin: 0px;
    padding: 0px;
    max-width: 100%!important;
    height: auto!important;
}

In the following file http://dalaigroup.com/wp-content/themes/cannyon_/media/_frontend/css/settings.css?ver=0.0.24

I don't know much about the differences there are between the current version of Boostrap that your site is using (3.3.1) and the most recent version the BSS app is using (3.3.7).

Saj

Thanks so much for this feedback. I used a min-width to have the image display the right size. I may create a separate version for mobile and use text components as suggested.

I'm not familiar with how to include an orange accent line, like the one in the image. Would I use a paragraph component for that as well? It seems like a border-top may be appropriate for the correct length, so I'm not sure.

Thank you again for all the advice. This has been very helpful.

If you accent line can be done 1 of 2 ways.

1) you could drag in a hr component in between the jumbron header and sub head/paragraph which will drop in a horizontal line (default bootstrap component) and then give it a custom class name then add said class to your style sheet and change the hex value for the background.

2) you could drag in a blank div in between the jumbrotron header and sub head / then Give the div a class name and then add in your style sheet. Once added give the div a background colour and set padding to be few pixels top and bottom (which will create space)

Both option will deliver the same result but I would go with option 1 as with the hr component a few steps will already be done for you

Thank you for these options. This helps a lot.