Hi there,
Thank you for getting in touch with us.
1. It seems that you have both background image and text which overlap each other on mobile. I would recommend to hide text on mobile with this css:
@media (max-width: 767px) {
.logo .header-logo-text {
display: none;
}
}
2. To change slider font size on mobile add this css:
@media (max-width: 767px) {
.frontpage-slider .caption h2 a {
font-size: 32px;
}
}
Hope that helps. Thank you for your time in this.
Best regards
Hi jarektheme
First of all – thank you.
1. It seems that you have both background image and text which overlap each other on mobile. I would recommend to hide text on mobile with this css:
That worked.
The only tiny problem there is that on ‘tablet’ view, the logo appears very tiny – whereas on desktop and mobile it now appears fine. Is there a solution for this? The padding around the tagline is set to 26 px – would changing this help?
To change slider font size on mobile add this css:
This worked beautifully – thank you!
Hi again,
I’m glad to hear that this works 🙂
Please try this css:
@media (min-width: 768px) and (max-width: 1024px) {
.tagline p {
font-size: 42px;
}
}
Kind regards
Hi jarektheme
Unfortunately that code didn’t help – the logo is still quiet tiny and not very clear in tablet mode
(it is clearly visible on both desktop and mobile mode)
Thanks
Hi there,
I’m very sorry for back and forth on this.
It seems that your site is in coming soon mode. Please try to play with the values from my last code. If that doesn’t help please make your site public so I’ll take a look at it again.
Best
Hi jarektheme
I have moved the logo to header-3 section – and chosen to hide header-2 in mobile mode, leaving only header-1 visible. This leaves the logo visible on all devices, even when the menu items are hidden.
Currently it looks like this when viewed on a tablet:
https://ibb.co/dcXq9m
How do I create a little gap between the logo the ‘about’ for media-mode? – if I adding padding to the logo, all the menu items, including the two black lines that define the menu, move to the right.
I just want to move the menu items slightly to the right, without moving the two black lines above and below the menu.
p.s. the site is now live again.
Many thanks!
Hi @flowerscat,
Try something like this:
@media (max-width: 992px) {
.navbar-collapse.collapse {
padding-left: 100px;
}
}
Kind regards
Hi jarerktheme
Thanks – that worked!
A final question – is there anyway to constrain the image in header-3 in media mode – looks like this currently when you expand on the menu: https://ibb.co/ncEJzm
Hi @flowerscat,
Please try this css:
@media (max-width: 767px) {
.header-row-3 {
background-size: 52px;
}
.navbar-collapse.collapse {
padding-left: 15px;
}
}
Hope that helps.
Best
Thank you – really appreciate it.
Hi @flowerscat,
I am glad it is working out for you 🙂
Would you please take some time out from your busy day to leave us a quick review.
We’d really appreciate it 🙂
