Issues on mobile

takamineman · January 2016

I'm experiencing 3 issues on mobile that I can't figure out.

1. The header 1 text that I used for the words "BASICCON BEGINS IN:" on this page http://www.basiccon.org/about/ is not responsive on mobile. I have turned on decrease fonts in the responsive options and it still isn't displaying correctly.

2. I'm not happy with how the Alerts look kind of squished on mobile. Is there a way to change that? You can see what I mean by the one on this page: http://www.basiccon.org/sponsors/

3. I've used zoom boxes on this page http://www.basiccon.org/speakers-and-artists/ that display a name when hovered over by inputting code in the content section of the zoom box options. These names aren't showing up on the mobile version. Here's the code I used for this: <div class="desc_txt"><h6>NICK NILSON</h6></div>

Albert · January 2016

1. This text is not responsive because of your custom css's. Check line 166 in your code and you will see that you or one of your plugins overwrite our styles. So or you will sort the plugin which is causing this or you can use below css to decrease this font on smaller devices:

@media only screen and (max-width: 767px)  {
    h1 { font-size: 20px !important; line-height: 20px !important; }
}

2. Sorry but we don't get it. The alerts looks exactly the same on our demo so we do not understand what exactly you want to change.

3. Some hover effects just does not work on mobile because they are simply incompatible with mobile devices.

takamineman · January 2016

Thanks for the quick reply.

1. That css worked perfect!

2. I realized the issue with the alerts was due to the padding I had set, so I adjusted that and it looks better now.

Also, is there a way to change the color of alerts? I was considering using the success alert, but liked the blue color of the info one better.

Albert · January 2016

So you mean to change the background color of success alert from green to blue? If that's what you mean, please send us link to page where you got this success alert.

takamineman · January 2016

Yes, I'd like to change the green alert here with the check mark to blue: http://themes.muffingroup.com/betheme/shortcodes/typography#alerts

Albert · January 2016

You can change this with the following css then:

.alert_success { background: #000 !important; }
.alert_success .alert_icon { background: #000 !important; }

takamineman · January 2016

Thanks, that helped. The problem I'm having now is that the link text in the alert box is gold and I'd like it to be white. I looked through the color options and can't figure out which one to change. Could you point me in the right direction?

takamineman · January 2016

Here's the page where you can see this: http://www.basiccon.org/sponsors/

Albert · January 2016

You can change this link color with:

.alert_success a, .alert_success a:hover { color: #FFF !important; }

takamineman · January 2016

Perfect. Thanks!

Albert · January 2016

You are welcome

Issues on mobile

Comments

This website uses cookies