cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Go to solution
Highlighted

Increase width of image on Home screen

http://stimuluscorpeducation.com/

 

I am designing this website , have added an image in the theme(attached), but the width is short. How can  increase the width of image to view the  whole picture. 

 

Screen Shot 2018-12-29 at 12.37.02 PM.png

2 ACCEPTED SOLUTIONS

Accepted Solutions
Highlighted
Super User II Super User II
Super User II
Solution

Re: Increase width of image on Home screen

It sounds like you're referring to the page heading which has a responsive background image.  Meaning the image scales to fit the screen, in doing so the height can be cropped to get the proper width on a widescreen or the width can be cropped to get the proper height on a vertical screen.

 

Ideally you'd want to frame the picture with a focal point with flexible space around that so it can be cropped preserving the sentiment of the image.  In your situation the space to fill is made up by the width of the screen and the height of the area for the heading text.  This can be changed in many ways, below is just one example.

 

 

.rdn-sub-header-inner {
    padding-top: 160px;
    padding-bottom: 160px;
}
.rdn-sub-header {
    background-position-y: center;
}

 

 The padding is the space above and below the text, I've separated them so you can adjust independently if desired.

 

The background-position-y is used to set the vertical focal point.  This can be adjusted not only with keywords (top, center, bottom), but also a numerical value in % or a CSS unit of measure (like px for pixel).

View solution in original post

Highlighted
Super User II Super User II
Super User II
Solution

Re: Increase width of image on Home screen

Edits directly to the theme would be deleted whenever it's updated.

 

If your theme is customizer compatible there should be an Additional CSS tab under Appearance > Customize.

 

Another option is to create a Child Theme, though this is more advanced.  There are also 3rd party plug-ins for modifying themes.

View solution in original post

3 REPLIES 3
Highlighted
Super User II Super User II
Super User II
Solution

Re: Increase width of image on Home screen

It sounds like you're referring to the page heading which has a responsive background image.  Meaning the image scales to fit the screen, in doing so the height can be cropped to get the proper width on a widescreen or the width can be cropped to get the proper height on a vertical screen.

 

Ideally you'd want to frame the picture with a focal point with flexible space around that so it can be cropped preserving the sentiment of the image.  In your situation the space to fill is made up by the width of the screen and the height of the area for the heading text.  This can be changed in many ways, below is just one example.

 

 

.rdn-sub-header-inner {
    padding-top: 160px;
    padding-bottom: 160px;
}
.rdn-sub-header {
    background-position-y: center;
}

 

 The padding is the space above and below the text, I've separated them so you can adjust independently if desired.

 

The background-position-y is used to set the vertical focal point.  This can be adjusted not only with keywords (top, center, bottom), but also a numerical value in % or a CSS unit of measure (like px for pixel).

View solution in original post

Highlighted

Re: Increase width of image on Home screen

Thanks for the response Nate, where can I modify this in the program ? 

 

In the Themes --> Editor --> CSS Style sheet , see this as below .

 

.rdn-sub-header li .active,
.rdn-sub-header ul li:before, 

 

Could you please let me know where to be modified ? 

 

Thanks,

Highlighted
Super User II Super User II
Super User II
Solution

Re: Increase width of image on Home screen

Edits directly to the theme would be deleted whenever it's updated.

 

If your theme is customizer compatible there should be an Additional CSS tab under Appearance > Customize.

 

Another option is to create a Child Theme, though this is more advanced.  There are also 3rd party plug-ins for modifying themes.

View solution in original post