Sight Theme: Mobile Adjustment (header to small, overlapping slider)

notyourcomfortzone · Member · Dec 27, 2014 at 10:47 pm
Copy link

Add topic to favorites
Hello again,

just as I mentioned earlier that day, I’m changing my theme from Adelle to Sight. After some great help from the support here the blog finally looks as good as I hoped. Unfortunately, there is one big issue: The mobile look.
Although Sight is responsive, there are some issues I hardly can describe and fix.

First, the header is too small in the mobile version and I don’t understand what part of the code is messing this up. I don’t mind if there would be no header at all but like this it just looks wrong. It would be great if someone can help me with this!

Second, the slider is overlapping: So I can see the picture and parts of the text.

I have a small code which I think is responsible for the mess but I’m note sure. How can I keep the width of the blog wider and still have a fitting mobile version?

Probably I need to post screenshots?

Thank you so much again in advance
Best wishes
Julia
```
@media screen and (min-width: 37.5em) {
	.site {
		max-width: 80em;
	}
}
```
The blog I need help with is: (visible only to logged in users)
notyourcomfortzone · Member · Dec 29, 2014 at 8:50 pm
Copy link
Anyone? ;____;
timethief · Member · Dec 29, 2014 at 8:54 pm
Copy link
There is a backlog so please be patient while waiting and know that when you bump a thread by posting into it again you are moving the date and timestamp ahead so it takes longer to get help. Patience is a virtue.
notyourcomfortzone · Member · Dec 29, 2014 at 8:57 pm
Copy link
Thank you for your reply – also for the information about the queue, I’ll keep that in mind! Totally understand that there is lots of work to do here!
timethief · Member · Dec 29, 2014 at 8:57 pm
Copy link
You’re welcome and best wishes. :)
thesacredpath · Member · Dec 30, 2014 at 8:22 pm
Copy link
Hi there, try adding the following CSS and see what you think.
```
.site-header hgroup {
    background-size: cover;
    width: 100%;
    background-position: center top;
}
```
notyourcomfortzone · Member · Jan 2, 2015 at 6:53 pm
Copy link
Hey there,

thank you for your help!

The css helps me to position the header right in the center of the blog which looks just perfect!

Yet, there is still the issues regarding the mobile version… in the beginning, the header was tiny. Now it’s big – but just too big. I can read the first and the last three letters of it.

Is there any possibility to adjust it for the mobile version or do I simply have to upload a smaller banner?

And do you have any idea regarding the slider? Is there any way I can make the text overlay dissappear?

Thank you so much again, wish everyone a happy new year!

Julia
thesacredpath · Member · Jan 6, 2015 at 6:18 pm
Copy link
Ok, we can fix this with a media query. I’ve set this to take effect at 400px and narrower. See how it works for you.
```
@media screen and (max-width: 400px) {
.site-header hgroup {
	background-size: 240%;
}
}
```
Add the above at the very bottom of your custom CSS.

No items found.