CSS for alert boxes only works on desktop WordPress
- SOLVED
I made a series of alert boxes with html + css, but they only work on desktop.
Can you re-code my CSS to make them work across mobile?
Here is the live page: https://www.llcuniversity.com/tech/icons/
----------------------------------------------------------------------------
HERE IS THE HTML:
<div class="icon-box icon-box-blue">
<div class="icon-position icon-blue-exclamation"></div>
<strong>Tip:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis leo lorem, non suscipit sapien semper id. Sed vulputate hendrerit dolor, eget porttitor leo ullamcorper vitae. Etiam ac eros finibus, cursus augue in, efficitur tellus. Vivamus faucibus laoreet sem, sed nulla.
</div>
----------------------------------------------------------------------------
HERE IS THE CSS FOR 1ST BOX:
.icon-box {
border-radius: 4px;
padding: 20px 30px 1px 30px;
margin-bottom: 30px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
#content-container .icon-box p {margin-bottom: 15px !important;}
.icon-box-blue {background: rgba(71, 173, 224, 0.25);}
.icon-position {
width: 36px;
height: 50px;
float: left;
margin-left: -48px;
position: relative;
top: 3px;
}
.icon-blue-exclamation {background: url(/wp-content/uploads/icon-blue-exclamation.png) no-repeat;}
----------------------------------------------------------------------------
Answers (2)
Reigel Gallarde answers:
I don't see any alert box.
Maybe because it has js error?
Apparently, this link ( https://www.llcuniversity.comhttps//www.llcuniversity.com/wp-includes/js/comment-reply.js ) is wrong but is called on the page. Maybe a typo error?
king2244 comments:
You don't see this?: https://www.screencast.com/t/jURtmTeVV
Reigel Gallarde comments:
this is what I see, http://i.imgur.com/HHEu40F.png
king2244 comments:
Geez... apologies about that. I just flushed cache. Any different now?
Reigel Gallarde comments:
yes, it looks ok now.. but I'm not really sure what help do you need.
It kinda looks ok on mobile.
Farid answers:
Hi,
This is how it looks like for now: http://jmp.sh/14oJQ8C
Please make sure you have uploaded your CSS file changes to the live site: https://www.llcuniversity.com/tech/icons/
So that I can test it on mobile device and provide you a solution for it.
Thank you.
Farid comments:
Or maybe you are tested your local site on desktop or live site with cache.
And when you visit your live site on mobile you don't see any changes on mobile. I have added them manually on live site and those looks like this in Desktop screen: http://jmp.sh/MucEtWx
On mobile screen: http://jmp.sh/jg7XNVE
Let me know if you still face this issue. I may need your site FTP but I will get it fixed on your site for sure :)
king2244 comments:
Geez... apologies about that. I just flushed cache. Any different now? But yes, what you are seeing is what it's supposed to look like. I think my CDN is causing issues.
Farid comments:
Now I have tested your site on my iPhone and it looks fine: http://jmp.sh/tqtoCum
In which browser are you testing your site on mobile?
Farid comments:
I have tested your site in Chrome, Safari and Opera Mini.