How to control of height and width of Masthead

patvandenbosche

I am using a Masthead module in position body-top-1. CSS code was provided to me in another site question about this same issue, but the module is not an edge to edge module. Can this be converted to a module that will allow edge to edge for the masthead image and I can control the height, width, color and size of both text lines with css? The css provided in the other question in another template did not seem to have any effect in this site/template. Thanks.

Screen shot provided:

Ninja

patvandenbosche
Hi
open template style options > edit layout > edit Masthead position
Set the width to Fluid to make it full width.
Now add this code in custom css

div.ja-masthead .ja-masthead-detail {
    padding: 64px 16px;}

Increase the padding value will increase its height.

Ninja

Ninja open template style options > edit layout > edit Masthead position
Set the width to Fluid to make it full width.

Hi
The module is on different position
use this code in custom css first line

.t4-body-top-1 .container {
    max-width: 100%;
    padding: 0px;
}

For description text size use this code

div.ja-masthead .ja-masthead-detail .ja-masthead-description {
    color: #fff;
    font-size: 16px;
    margin-top: 16px;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

patvandenbosche

I did as you instructed, but it didn't work. I'm attaching a screenshot showing what I mean. Also, I need to control the second line of text on the module. As you can see in the screenshot, you can barely read it. I need to change the size of the font and the color of the second line.

patvandenbosche

Just to be clear, I need to get the module to be edge of screen to edge of screen. And I need to control the font size and color of the second line of text. I already have the first line css to change the color and height (thanks to you).

Thanks!