Cool mobile view customization

Hello
If you all take a deeper look on your websites analytics you will find out that most users now days are using mobile devices. That's why i'm trying to find ways to make EB layout more attractive for my visitors from mobile devices with custom css coding.

The idea is to show the title on top of the post cover (overlay) and add some linear-gradient background so it's looks better. Also i hided the meta info (publisher, date etc).

I'm working only with custom css because if i try to edit the entry layout and add the cover and the text on different divs the changes will be shown in every viewport and not only in mobile.

Any suggestions to correct my code or make it more attractive are welcome.

@media (max-width:768px){ /*Viewport*/

.eb-entry-meta {display: none!important;} /*hide the meta*/

.eb-entry-title {font-size:30px; margin: 0 10px 0!important; color: #fff!important;} /*Entry title change color to white*/

.ebd-block {margin: 0 10px 0;} /*right and left margin for the blog content*/

.eb-entry-head {height: 480px!important; position: absolute; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); z-index: 3; padding-top: 330px;} /*The heading div that contains the title*/

.eb-container {margin-top:-110px!important;} /*Cover the space that will be left after moving the menu at the bottom*/

.eb-post-image-cover {border-style: none!important;} /*remove the image border so it looks full screen*/

}

Here are some screenshots of my result


Regards