-
Posts
-
On my website I’m using 1/2 icon box / 1/2 easy slider. The image is higher than the icon box content:
Backend: https://www.dropbox.com/s/v0hudyaxsvwwczc/Screenshot%202014-01-17%2013.59.33.png
Frontend: https://www.dropbox.com/s/cgeonkqkmw6yhhc/Screenshot%202014-01-17%2013.59.50.png
How can I vertically align the iconbox with the easy slider img?
Hi Linden Mobile!
Can you post a mockup/screenshot of what would you want to achieve? also a link to your website would be helpful.
Cheers!
JosueHey!
We really need to inspect the actual website to give you a proper css solution. You can post the login details here as a private reply.
Regards,
IsmaelHi!
Please post a link to the page with the slider + iconbox. I couldn’t find it on the homepage…
Regards,
PeterHi!
Please try to insert following code into the quick css field
#top.page-id-2539 .avia-slideshow li img { width: auto; max-height: 314px; }If you want to set a different heights use this code
#top.page-id-2539 .avia-slideshow.avia-slideshow-1 li img { width: auto; max-height: 314px; }for the first slideshow and
#top.page-id-2539 .avia-slideshow.avia-slideshow-2 li img { width: auto; max-height: 314px; }for the second slideshow and change the max-height value if necessary.
Regards,
PeterThat makes the img next to it the same size as the icon list. But I need the img to stay the same and let the icon list be centered in the middle of the img(like my beautiful mockup shows :P) This has to work on multiple pages like:
http://lindenmobileappstore.nl/branches/media-entertainment/artiest-app/
http://lindenmobileappstore.nl/branches/media-entertainment/radio-app/
http://lindenmobileappstore.nl/branches/media-entertainment/theater-app/
http://lindenmobileappstore.nl/branches/evenementen/festival-app/And a lot more. A few of em are still in the making. Any ideas?
Hey!
Is this what you want to achieve?
http://lindenmobileappstore.nl/branches/congres-app/Cheers!
JosueNo I’ve already tried using white spaces but than it just looks right for the screen I used at that moment. The icon list just has to center.
Hi!
See: http://lindenmobileappstore.nl/branches/evenementen/congres-app/
I implemented a script on js/avia.js to align the list relatively to the adjacent element, all you need to do now is add the classes custom_list_l and custom_list_r (respectively) to the lists on your site. Use this page as a reference.
Cheers!
JosueHi Josue!
Yes this is what I was trying to figure out! Thank you very much.
Very pleased with the theme as well.
And my < li > is showing left of the icon list haha:
https://www.dropbox.com/s/t9gadt7ekjjz28s/Screenshot%202014-01-27%2017.18.55.png
Sorry, did add this rule:
.entry-content-wrapper div li {
list-style-type: none;
background: url(‘http://lindenmobileappstore.nl/wp-content/uploads/2014/01/li-bullet-81.png’) no-repeat center left;
/* height: 1,2em; */
padding-left: 10px;
}Hey!
Now it’s working again:
http://lindenmobileappstore.nl/branches/evenementen/congres-app/There was some CSS missing, in case you update your theme or it get lost again, you can use the codes in this Gist as a reference (read the comments):
https://gist.github.com/josueochoa/ae8214df978403dfad04Cheers!
Josue
- The topic ‘Vertically align icon box next to easy slider’ is closed to new replies.