Cool mobile view customization
By Chaon on Wednesday, 09 February 2022
Posted in Tutorials (Not Supported)
Replies 7
Likes 0
Views 721
Votes 0
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
I personally think the original layout already looks good already, but I believe anyone else got to have a good experience with this, also, please don't hesitate to share any recommendations if you know of by leaving your comments.
Arlex Wong
·
Thursday, 10 February 2022 15:54
·
0 Likes
·
0 Votes
·
0 Comments
·
I personally think the original layout already looks good already, but I believe anyone else got to have a good experience with this, also, please don't hesitate to share any recommendations if you know of by leaving your comments.

It's a matter of taste
Anyway i had to give up on this because i noticed that the post cover is rendered inside the eb-entry-body type alltogether with the blog content and also there is a module position between title and post cover so probably my css will cause a mess.
Chaon
·
Thursday, 10 February 2022 17:08
·
0 Likes
·
0 Votes
·
0 Comments
·
Yes, if you want to render separately for the title, post cover, and content, then it is required to modify the core file in order to achieve this.
Arlex Wong
·
Thursday, 10 February 2022 18:54
·
0 Likes
·
0 Votes
·
0 Comments
·
Yes, if you want to render separately for the title, post cover, and content, then it is required to modify the core file in order to achieve this.

I know that we talk about customization and there is no support for this but i'm struggling to find a way to seperate the post cover from the post entry in order to achieve some different looks on EB entry view.
For example i need to move the post meta after the post cover so there will be 1. Title 2. Post cover 3. Post meta. Any chance that i can get some help on that?
Chaon
·
Wednesday, 23 February 2022 20:20
·
0 Likes
·
0 Votes
·
0 Comments
·
You can try to use this to render post cover on the blog entry page.


				<?php echo $this->html('post.entry.cover', $post, [

					'showCover' => $this->entryParams->get('post_image', false), 

					'showCoverPlaceholder' => $this->entryParams->get('post_image_placeholder', false)

				]); ?>
Arlex Wong
·
Thursday, 24 February 2022 12:12
·
0 Likes
·
0 Votes
·
0 Comments
·
Quoted from Arlex Wong on Thursday, 10 February 2022
Yes, if you want to render separately for the title, post cover, and content, then it is required to modify the core file in order to achieve this.

Thank you so much for this
Chaon
·
Friday, 25 February 2022 04:18
·
0 Likes
·
0 Votes
·
0 Comments
·
You're welcome.
Arlex Wong
·
Friday, 25 February 2022 10:25
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post