Welcome! To use this support forum, please Login or Join Today!

   

Banner Image in Widget: Full-Width possible + Responsive Text?

{name}
RankRankRank

Total Posts: 52

Joined 2014-11-03

PM

 
I've put a banner into this (IMPACTO) home page site, using a Text Widget in the Above Content area.
http://votec.eplatt.com/

However I'd like it to go all the way across, like on this site: http://www.votec.net/

Also the text is not responsive - doesn't change size as the window gets small. I thought ems would do that?

I could use a slider plugin (like Master Slider) that has text overlays to create a banner but feel like that would be overkill for just one image.

I could also put the text in the image but that would not look as sharp at all resolutions nor be easily editable.


Thanks!
{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 
This isn't a full width theme, so you won't be able to do this with the above content widget because it is rendered in the main layout area.

You can either put your content in the teaser widget or add your own through the st_below_header hook.

function my_fullwidth_area() {
 
echo 'full width content.';
}
add_action
'st_below_header''my_fullwidth_area',1); 


As for the font size, you have to write rules for each media size or declare a base font size for the element, otherwise ems will use the body text size as a base. You may want to define your desktop font size first and then use percentage to scale it down with media queries.

In the example of votec.net, it is using javascript to resize the font dynamically.

{name}
RankRankRank

Total Posts: 52

Joined 2014-11-03

PM

 
Makes sense about the main content area.

So I tried the banner in the teaser area, but it comes out not going all the way to the left - there is a large black band.
It's also not responsive - stays the same size when I shrink the window.

Pardon my ignorance, but how do I use the function my_fullwidth_area() function once it's in the functions file – does it create another widget? Or do we do it through CSS?

As for base font size, I'm not familiar in detail with that: I already have body font defined as (in style3.css):
body p {
color
:#4c4c4c;
font-size:16px;
font-family:"HelveticaNeue""Helvetica Neue"HelveticaArialsans-serif;


Should I use ems or ?.