Mountain Theme - Not mobile friendly

Classic Themes
1

Hello,
Does anyone know how to create the banner in Mountain theme so that it reduces proportionally on mobile phones?
Thanks!
Desperate!

2

I shared some suggested CSS code in this discussion here for reducing the banner height in the Mountain theme:

Others have said it worked well for them, so you may wish to try that.

Using ‘viewport’ units of measurement will give you proportionate sizing. The basic principle is illustrated quite nicely here:
https://alligator.io/css/viewport-units/

3

Hi, yes i saw that, and tried it, but it didn’t fix the problem on mobile devices. I will look into it further thanks and let you know if i’ve managed to solve it. Thanks

4

Is there anyway to do it just for mobile rather than the entire site?

5

04
04413×929 87 KB
17
17894×445 135 KB

So you can see my problem. thanks

6

Assuming you want to reverse the logic, then use a max-width condition instead:

@media screen and (max-width: 768px) {
	.hero,
	.hero-background {
        height: 50vh;
    }
}

Which will give:

11
113016×1841 1.15 MB

So now your banner remains 100% tall on desktop, but reduces to 50% tall on mobile (any screen less than 768px wide).

7

Thank you so much Mr. Woodgate, it did fix my mobile banner perfectly and thanks for “reversing the Logic” as my head has a hard time getting around that “logic” I did try lots of combinations. But I still have an issue, when I look at my website on a table in portrait mode, the same thing happens.

Yoga%20Barbados
Yoga%20Barbados1668×2224 233 KB

Yoga%20Barbados%202
Yoga%20Barbados%2022224×1668 296 KB

8

Sorry Tablet, not table

9

If the issue is with the banner image getting cut-off down the left and right sides on smaller screens, then perhaps the problem is that the theme does not scale banner images down to fit differently to what you were expecting?

This is your current code for background sizing:

.hero-background {
background-size: cover;
}

You can read about what ‘cover’ does here:

There is a different property to try called ‘contain’:

.hero-background {
background-size: contain;
}

Or ‘auto’ combined with ‘no repeat’:

.hero-background {
background-size: auto;
background-repeat: no-repeat;
}

Either way, it is going to be a tricky adjustment to make - trying to adjust both the height and background positioning combined.

Typically with CSS backgrounds, you use a generic pattern and assume a portion of that image will always be repeated or cropped to fill the area without distortion. CSS backgrounds are geared towards wallpapering an entire area.

Whereas images set as tags typically means the image stretches proportionally to the width of its outer container and has an ‘auto’ height.

Mountains is just a free ‘getting started’ theme that Realmac added into RapidWeaver 8. You might have more success using a third-party theme instead. That might have sufficiently more flexibility and features like ExtraContent containers in the banner area.

10

Thank you so much. I don’t know why i chose this theme, I have built websites from scratch with Rapid weaver but I thought it would be easier. I will pay around with it. Thanks again for all your help

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.