Buttons overlaying on mobile

[Matt]

Hi Guys

I have 4 feature buttons on our page, but when viewing on mobile the text of the first image is overlaying the second, and then the text of the second overlaying the image of the third etc..

Can I space these out? It is also hiding the “Click here” link on mobile view.

web address – http://www.bushcraft-magazine.co.uk

current custom css code is as follows

.header .header-inner .logo{float:none !important; text-align:center;}
.header .header-inner .logo img{height:200px !important;}

.feature-box .feat-image{height:auto;}
.feat-image img {height:160px;}

@media screen and (max-width:990px) {
.nav ul { background:#252525;}
.header .header-inner .logo img{height:100px !important;}
}

@media screen and (min-width:320px) and (max-width:767px) {
.slide_info h2, .slide_info h2 a, .slide_info h2 a:hover { font-size:16px !important;}
}

@media screen and (min-width:768px) and (max-width:1024px) {
.header .header-inner .logo img { height:80px !important;}
.header .header-inner .nav ul li { padding-right:30px !important;}
.header .header-inner .nav ul { font-size:15px !important;}
.header .header-inner .nav { padding-left:0 !important}
.slide_info { top:25px !important; width:60% !important;}
}

@media screen and (max-width:479px) {
.slide_info { top:195px !important;}
}

Thanks
Matt

[Forum Moderator]

Hi Matt,

Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

Add this code there:

.feature-box{height:auto !important;}

Regards,
Brad

[Matt]

Thanks, that’s sorted it

Matt

[Forum Moderator]

🙂

[Author]

Posts