I downloaded a site template which now works well on laptops, but the top image that shows on laptops doesn’t show on mobiles. I subsequently found out that the original template has the same issue.
The link for the modified page is https://www.mind-waves.stevenredhead.com/ and the original template I downloaded is https://www.mind-waves.stevenredhead.com/Template-index.html.
Any ideas why both these pages are not showing the top image on mobiles would be most welcome.
I have an android LG mobile, so not sure if the site works on iPhones.
Thank you.
Are you talking about the slideshow that is hidden under your fixed top menu on mobiles?
If so you probably need to move it dow when the menu kicks in.
e.g.
@media screen and (max-width:768px){
.slider{padding-top:102px;margin-top:0;}
}
Of course there is little room for a slider on small screens so you may be better off getting rid of it and just having a static image or heading.
1 Like
Thank you for your help PaulOB.
Actually, I had already removed that slider image from the template and replaced with text. There is a top image that shows when viewed on desktops, but on mobiles there is just a narrow colored strip at the top, then text.
As you mentioned the template has a slider, which does show on mobiles and desktops, I am wondering whether the author of the template had the slider for substitute of the top image on mobiles. There are many images in the img folder so I had assumes that the duplicates of different sizes were for different platforms.
I wanted to resolve the site so it is showing the top image on mobiles.
Any ideas would be welcome.
Sorry you lost me there 
I’m still seeing the same thing I saw last time with a slider on mobile that is hidden by the fixed menu. I don’t see any images apart from the slider images.
You will need to provide screenshots of what you are seeing and what you want to happen. Otherwise what I already said still holds true.
1 Like
That you for your help with this PaulOB.
On a computer, desktop or tablet the page has a top image, on a mobile this image is missing.
Originally the template had a slider, but I removed this.
Perhaps the design is for the slider to replace the top image on Mobiles?
This image is missing on mobiles.
At the risk of sounding like a parrot repeating the same phrase I’m still seeing what I described in my first post and here is the screenshot to prove it.
As you can see the slider is still there with the same image you posted but underneath the fixed top black menu.
Are you seeing something different?
You posted an image of something that was not wrong so it was no help to me
2 Likes
FWIW, I see the same as @PaulOB on mobile - the slider images mostly obscured by the black header.
2 Likes
Thank you PaulOB for your continued efforts and replies.
There were two slider images on the original template I mentioned,
https://www.mind-waves.stevenredhead.com/Template-index.html
the top slider image and the smaller one that does show on mobiles. As you mentioned, I deleted the small slider image from the site. So I became confused, I thought you were referring to the small slider image on the original template.
The image I posed above was the site as displayed on the computer; what I wanted to figure out is why the Top slider image is not showing on mobiles.
I must apologise, as with my limited knowledge I hadn’t realized that the code you placed originally was the solution.
I have added the code you placed originally to the bootstrap.css and the image now partially shows on mobiles.
The issue that now occurs is that the ‘click to start’ button is extremely large over the top slider image on mobiles - which is not a major issue; also the top left link shown on computers is now is over the top image under the ‘click to start’ button, instead of the ‘click to start’ being activated the top left link image is.
Is there a fix for this?
Thank you for your continued support.
Thank you for your response TechnoBear, me too, this was what I was trying to resolve, why a computer, laptop and tablet show the top image but not mobiles.
With my limited knowledge, I had not realised that the code PaulOB had posted was the actual solution to the issue; sorry for my confusion.
I gave you the fix for that in my very first post.
Fixed elements are removed from the flow and therefore sit on top of anything else that is in the page unless you make some room for it which is what the code I gave you in the first post does. It adds padding-top so that the slider is pushed down and thus visible.
1 Like
Hi PaulOB, yes, I apologies, I am not so technically proficient so I had completely misunderstood. I just revised my previous reply - but while I was doing that you replied.
I managed to figure out that I need to add what you placed in your original post in the bootstrap.css, this has made the top image visible on mobiles.
As I mentioned in the revised reply above the link shown on the top left on desktops is now over the top image and under the "click to start’ button. When clicking the "click to start’ button on mobiles the result is to activate the hidden link.
Is it possible to reduce the hight of the top menu, which shows black on mobiles? The black top menu on mobiles seems to need reducing the height. I am not sure where in the code to alter.
Is there other additions or modifications I could make that would resolve this.
You can reduce the height using media queries just as I showed for the slider.
Try this:
@media screen and (max-width:768px){
.slider{padding-top:51px;margin-top:0!important;}
.navbar.navbar-fixed-top{
height:50px;
line-height:50px;
}
.navbar.navbar-fixed-top h1{margin:0;}
.navbar.navbar-fixed-top h1 a{line-height:50px}
}
Note that you put the code in the wrong place when you added it to the css file as you placed it before the normal rules for that style and thus some of the rules I gave were overwritten. You must place the max-width media query after any existing rules for the same properties (e.g. add it at the end of the file just to be safe).
1 Like
Thank you PaulOB I tried what you said. I added the two sets of code as you mentioned at the end of the bootstrap.css file.
The menu on the mobiles has a much better height now. The menu also automatically shrinks back after clicking an option - which is great; previously it tended to stay blocking the page until the top 3 bar menu was clicked again.
I removed the top left link on the pages as this was still showing over the top image on mobiles, it now shows on the black meu band - which is good.
I copied the html from the index.html to the Contact page and this is also fine now.
Thank you for your patience and great support.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.