Hello!
I want to ask you how to align child elements to the top of a parent element.
In my case this is a 1/1 colour section with 3 1/3 sections. In the middle 1/3 section I have a text block. This text block always aligns itself to the vertical center of the parent div, like in this image: https://www.dropbox.com/s/k63wvj77zklzmyi/mockup-enfold2.png?dl=0
I would like this element to align itself to the top of the parent element, like on my mockup: https://www.dropbox.com/s/ms9l87vou5nlfh6/mockup-enfold.jpg?dl=0
Can you help me? :)
My website has just gone live this afternoon (www.fairbanks.com.au) and the desktop version looks great.
The mobile site however has a number of issues, and need these sorted ASAP! I have adopted many of the suggestion on other forum topics, to try and solve these problems. I have made them slightly better – but I still have some concerns
1. The slider on the home page isn’t displaying perfectly on a mobile site – the text drops off the bottom of the slider. How do I stop the text from dropping off the slider?
2. I have tried a number of approaches to resizing the slider on the home page, so that the image is displayed correctly. Would I be better to have a different set of images that are only displayed on a mobile site? If so, how do I do this!???
2. The Captions on the home page over the four images in the product grid aren’t resized correctly on the mobile site. Can you please tell me how to correct this, as it is a reoccurring problem throughout my website.
3. I am currently working my way through all the product category pages to delete the background image in the colour section for the mobile site only (by adding a custom ID). Is is possible to have a different image appear on the mobile site (instead of no image). How would I do this?
Thanks for your help, I really appreciate your help with these issues.
If I use the Separator / Whitespace block after, e.g., 1/2 column section, it does not have proper top margin (should be 30px, but is 0). This is because top margins do not work after floated elements, and the flex columns are all float: left. Now, I could patch this up by adding an empty 1/1 column between the columns and the separator, but maybe you should correct this in the theme code. My suggestion is that all the Separator blocks should have an empty <div style=”clear: both”></div> before the <hr> element.
-
This topic was modified 9 years, 7 months ago by
Hefio_Play.
Hello, I’ve just noticed that some of the category filters I have on a masonry page are not showing. This is due to the posts being too old (my fault, I need to nag my colleagues to write more blog posts, news etc.. )
Is there a way of perminantly showing all category filters at the top even if there are none on the current page (of 50) I would rather not have to load all of them on the page! There are quite a few :)
Page in question: http://www.ecdis.org/news/
Hi,
Please add the below code to fix it on mobile :)
@media only screen and (max-width: 768px){
.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 0!important;
}}
Best regards,
Vinay
Hi Ant,
Ok, thanks for the feedback. I’m not sure if you need any further help on the topic though?
Regards,
Rikard
Hi,
my website has on ipad white stripes between the sections. I found out that the the outer class div.avia-section is always 2 Pixel smaller than the inner class div.container. The white stripes are because of the white background of the outer class. Do I change the inner class (remove 2 Pixel from height) the outer container (.avia-section) get 2 Pixel smaller as well. That happens only on ipad. On desktop view and on smartphones it works well. Any idea?
Actually I am still having an issue with the grid areas displaying well across different size screens.
I have changed the image sizing to “entry without sidebar” on the top 2 images (1/2 columns. But I’m viewing on a large screen iMac and their is a gap around each one – then when i check different size screens in developer mode in Safari to show responsiveness the buttons dont centre on the iPads and smaller desktop screens and on the mobile phones there is a big gap between each image.
When I put the images in at “full size” they dont scale evenly either.
What is the best size to create my images at so I can get them to display correctly?
new website link below
Hi,
Glad you got it working :-)
Please let us know if you should need any further help on the topic.
Regards,
Rikard
Hi,
Great, glad you got working and thanks for the feedback :-)
Please let us know if you should need any further help on the topic.
Thanks,
Rikard
Hi Doug,
Great, thanks for letting us know and glad you found a solution :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
Hi mcraig77,
Please try the following in Quick CSS under Enfold–>General Styling:
#top .avia-slideshow-arrows a {
font-size: 50px !important;
}
#top .av-control-minimal .avia-slideshow-arrows a:before {
border: 2px solid transparent !important;
}
Thanks,
Rikard
Hi,
To adjust space between main content and header.
.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 262px!important;
}
Best regards,
Vinay
Hi!
Thank you for using Enfold
We answered your inquiries here: https://kriesi.at/support/topic/just-learning-enfold-some-questions-after-my-first-15-hours-on-this/#post-688306
And if possible, please create separate threads or posts for each inquiry. Thank you.
Cheers!
Ismael
Hi!
Thank you for using Enfold.
1.) Could you please provide a link to the page with the text block and special heading issue?
2.) In the Enfold > General Styling > Quick CSS field, use this css code to increase the gap between the menu items:
@media only screen and (min-width: 768px) {
.av-main-nav > li > a {
padding: 0 20px;
}
}
3.) Use the full width slider or use the color section element, apply the image as background.
4.) I’m sorry but could you please provide a screenshot of the image with the caption? Have you tried the image element?
5.) The title container should inherit the style or options set in the Enfold > General Styling panel but you can always add css modifications in the Quick CSS field if you want to customise the style of a specific element. For example, you can change the title container background and font color with this:
#top .title_container .container {
background: red;
}
.alternate_color .breadcrumb, .alternate_color .breadcrumb a, #top .alternate_color.title_container .main-title, #top .alternate_color.title_container .main-title a {
color: blue;
}
6.) Did you use the advance layout builder to create the content of the page?
Cheers!
Ismael
Hi!
Could you please provide a screenshot of the expected layout? You can modify the taxonomy-portfolio_entries.php file and place the featured image container above this code:
do_action( 'ava_after_main_title' );
.. Or use the “ava_after_main_title”. Example here:
// https://kriesi.at/support/topic/insert-color-section-on-each-single-portfolio-post/
// https://kriesi.at/support/topic/hook-to-insert-html-under-logo/#post-643837
Best regards,
Ismael
Hi,
Great, glad you got it working :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top .social_bookmarks {
height: auto !important;
}
Let me know if that helps.
Best regards,
Jordan
Hey Ronaldgoudriaan,
Sorry for the delayed response.
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px){
.responsive #top #wrap_all .container {
width: 95%;
max-width: 100%;
}
}
Best regards,
Jordan
Hello,
I increased the size of the social icons in the header using this code:
#top .social_bookmarks li a {
width: 50px;
line-height: 32px;
min-height: 50px;
font-size: 30px;
}
#top .social_bookmarks li {
height: 100%;
width: 50px;
}
#top .social_bookmarks li a { line-height: 50px; }
My logo and menu is left/right, with the icons in the main header area. However since doing so the larger icons are not vertically centered and are cut off, like so:

How can I fix this?
-
This topic was modified 9 years, 7 months ago by
sbudnic1.
Hello,
I would like some help here guys. I am building a website and i have been experimenting with the Featured image slider as a home page. The result is what i want in desktops/tablets, but not on mobile phones. It looks a bit ugly.
My question is:
Can i display a different page for the mobile version of the site? And if yes, how can i achieve that? In other words, how can i redirect to another page on mobiles.
I tried adding a code block and used the following java script (private content), but it leaves a white space at the bottom of the page which i do not want.
Any help is appreciated.
Thanks
Hey Arthith,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#footer:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: none;
z-index:0;
background-color: rgba(0,0,0,0.5);
display: block;
}
#footer {
background: url(https://wl58www297.webland.ch/wp-content/uploads/2016/09/40287914_ml.jpg) cover top left;
}
Best regards,
Vinay
Try this here:
.av-burger-overlay-inner, .av-burger-overlay-bg {
background: #fff url("/wp-content/uploads/2015/07/laptop-white.jpg") no-repeat scroll 0 0;
}
.av-burger-overlay-active #top .av-hamburger-inner, .av-burger-overlay-active #top .av-hamburger-inner::before, .av-burger-overlay-active #top .av-hamburger-inner::after {
background-color: #000 !important;
}
#av-burger-menu-ul li a {
color: #000 !important;
}
you see that a background-image is possible too !
Result see here: Link
Hi guys,
I have a multiple issues, I searched and poked around on the forum and google, I did all the suggestions. but still the visual and text editor are still not showing.
1- update to the latest version of enfold,
2- update wordpress to the latest version
3 – deactivate all plugin
4- I had issues with updating enfold from the admin area, the (config-bbpress) folder disappeared then I uploaded the folder (config-bbpress) via ftp then I got these wierd symbols on top my menu, see image

then I had to upload the whole theme 3.8 via ftp (now the child them) stopped working but the symbols disappered so I spend a couple of hours trying to remember what I did and fix the site back to the way I had it before this mess.
but I still don’t see anything in the visual and text editor. see image below

after all this mess I still don’t see anything in the text editor.
Help Please?
Hey There,
I’m working on a website, and I would like to use a image in the footer, but with the image you can’t really read the content of the footer, so I wanted to add a black overlay. but it’s not really working.
This is the css I have added:
#footer {
opacity: 1;
background-color: #000;
background: rgba(0, 0, 0, 5) url(https://wl58www297.webland.ch/wp-content/uploads/2016/09/40287914_ml.jpg) repeat top left;
}
Could you please help me?
Cheers,
Aathi
RJParticipant
Hi,
I tried this solution: https://kriesi.at/support/topic/avia-post-nav-with-the-same-category/
But it doesn’t work :( http://simone-engelen.com/portfolio-item/ed-it/ there should be only 1 other portfolio item in the same category and it’s showing others.
Am i missing something?
Hi all, how can i center the title and the description on Masonry gallery?
Here u can show what i mean:
At the Top the Masonry Gallery i mean the Title and the Description under the Pics.
This i want to have to centered.
Sry for Bad English
To your point 2) now we have this hamburger – menu if one likes to have it
on that i have to look how to get the logo in that menu –
but on the old offcanvas Navigation there is this code to quick css :
#mobile-advanced {
background-image: url("path to your logo");
background-position: left top;
background-repeat: no-repeat;
background-size: 75% auto;
padding: 20% 0 !important ;
}
depending on your logo – you have to set up different size and padding – values !
if you want to have your logo on the hamburger menu simply insert the home link twice to your menu and fill in the navigation label of the first one the image link (f.e.: <img src="/wp-content/uploads/Logo_white.png" alt="wpwdweiss" width="400" /> )
it is best to have here an alternative Logo (as on transparent option) that has good contrast to the dark background.
-
This reply was modified 9 years, 7 months ago by
Guenni007.
To your point 3 try this in quick css (you have to set up your own colors)
@media only screen and (max-width: 767px) {
.responsive #top .avia-post-nav { display: block }
#top .avia-post-next {background:none repeat scroll 0 0 rgba(255,50,50,0.6);top: 65%}
#top .avia-post-prev {background:none repeat scroll 0 0 rgba(50, 100, 255,0.6);top: 65%}
#top .avia-post-nav {height: 60px;margin-top: -55px;padding: 15px}
.avia-post-nav .entry-info-wrap {margin-top: -11px}
.avia-post-nav .entry-info {height: 50px;width: 180px}
.avia-post-nav .entry-image {height: 50px;width: 50px}
.avia-post-nav .entry-info span {display: table-cell;font-size: 13px;line-height: 1.3em;vertical-align: middle}
.avia-post-nav .entry-image img {display: block;height: auto;width: 50px}
.avia-post-nav:hover .entry-info-wrap {width: 200px}
}
i did change the height too – because on mobile it looks strange if those navigations are on normal height.
btw: if you want to change the direction (previous is to the left – next is to the right side) add this to child-theme functions.php:
add_filter( 'avia_post_nav_entries', 'enfold_customization_postnav', 10, 2);
function enfold_customization_postnav($entries, $settings) {
$entries['prev'] = get_next_post($settings['same_category']);
$entries['next'] = get_previous_post($settings['same_category']);
return $entries;
}
Hi,
Please add the google maps API key in Enfold > Google Services > API key option.
If you have any questions that’s not related to the main topic of this ticket please open a new ticket so we can keep the focus on the main topic.
Best regards,
Vinay