Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Themes /

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Site logo in header doesn't scale on small screen


Go to End


4 Posts   2102 Views

Avatar
Vvanduijvendijk

Community Member, 2 Posts

2 December 2014 at 12:18pm

I've added a header logo and banner to mu Simple Theme via Extending SilverStripe 3 Site Settings.

The logo and banner doesn't scale on small screens. I have used SetRatioSize.
see www.sponsor-concepts.com/stripe

Is this a CSS issue, of did I make a mistake in the header.ss code?

Many thanks for your help!

Header.ss
<header class="header" role="banner">
<div class="inner">
<div class="unit size4of4 lastUnit">
<a href="$BaseHref" class="brand" rel="home">
$SiteConfig.LogoImage.SetRatioSize(300,70)
</a>
<% if $SearchForm %>
<span class="search-dropdown-icon">L</span>
<div class="search-bar">
$SearchForm
</div>
<% end_if %>
<% include Navigation %>
</div>
$SiteConfig.HeaderImage.SetRatioSize(1100,1100)
</div>
</header>

Avatar
thomas.paulson

Community Member, 107 Posts

2 December 2014 at 2:54pm

You can add inline style like below
<img src="$SiteConfig.LogoImage.SetRatioSize(300,70).url" style="max-width:100%;height:auto;">

or add an entry for image in external style sheet
img{
max-width:100%;height:auto;
}

Avatar
Vvanduijvendijk

Community Member, 2 Posts

2 December 2014 at 3:17pm

Thank you very much! Works great, this was exactly what I needed..

Avatar
thomas.paulson

Community Member, 107 Posts

3 December 2014 at 4:34am

you are welcome