Forum Replies Created
-
Posts
-
Hi Victoria,
Thank you! After adjusting the max width, the custom css worked great. Thanks again!
EricThank you! This works although the drop down sub menu is overlapping the top link. What adjustment can I make to the custom CSS to have the drop down sub menu move down so it’s not covering the top menu item? Thanks again for your help!
Thanks Mike. Will check that out. Btw I’m unable to view any private content. I’m logged in to your support forum but am only able to reply in the private area and view my own private area posts, not yours or Ismaels (moderators). Thanks!
Hi Ismael,
Reviewing the two in page drop down menu options, the ajax method we currently have is a better UX on mobile. The problem that we’re having which may or may not be related to the latest Enfold update, is that the menu links are not working in Safari and Chrome. Yet in Firefox they’re working fine. The location is below.
Thanks!
EricHi Victoria,
You’re the best! Thank you! This works great. The only issue is that the background on part of the top nav item isn’t filling the entire rectangular area as it does with the sub nav menu items. Also the text link isn’t aligned with the text links in the sub nav menu. Can we fill in the entire background as well as have the text align with the sub nav menu item text? Thank you!/* SECONDARY TOP NAV STYLING FIX */
#top #header .sub-menu {
left: 0;
}
#top #header_meta nav li.menu-item:hover > a {
color: #57c7ef;
background-color: #444;
border: none!important;
}
#top #header_meta nav li.menu-item:hover {
background-color: #444;
}
#top #header_meta nav li {
height: 31px;
}
#top #header .sub-menu li a {
font-size: 12px !important;
}Thank you Victoria! This helps a lot. What can we add so that it has the same background color on hover as the main nav drop down menus? We’re also noticing that it’s not dropping down directly below the main link but off to the left. Where is the css snippet to keep it aligned directly below the nav link?
Also, is there a way to have it appear on the mobile menu? The secondary top nav disappears once we’re in mobile portrait screens. Thank you!
Hi Mike,
Thanks for the snippet of code. I think this will be better to use than the ajax drop down menu we’re using now (which is not redirecting at all in safari and chrome) after the latest update (can’t tell if it’s enfold, wordpress, etc.) But the simple html drop down should be much better.The only problems we’re having is with the drop down menu overlay on other avia page builder elements. (see private area for screenshot). The links within the drop down menu work until they’re overlapping the content element below. And what would be the update to the code to have the drop down menu have a drop shadow and a background / font color change on mouse hover?
Thank you for your help!
EricNot sure what happened as it was working prior to writing this request. We updated to the back up CSS we had and it’s working fine. Not sure where you’re seeing WAY too many calls with the dynamic avia code. Please advise. Thanks!
Hi Rikard,
The image route is bad for SEO and requires multiple images for different screens. We went with using the 1/5 column with some css to keep the graphics in line and created two versions for small and large screens. Thanks!
EricWhat did you change in the custom css? I had a back up and reverted it back. The site is now working fine.
As a work around we copied the element and used the “responsiveness” settings creating table elements of 1×8 columns, 2×4 columns and 4×2 columns choosing to hide each table element / column set based on screen width. This somewhat solves the problem but since the break points are fixed we still have layout issues with the columns at 1×8 columns. The overlapping starts at the 1110px browser window width. Ideally having the table element jump to 2×4 columns wouid be best OR allow the font size to shrink..
Also, we set the 2×4 column table elements for the mobile views in the responsive settings but the theme is forcing a single column where there’s too much space on the sides. How can we override the single column default of the theme to allow for two columns which fit perfectly well (padding and margins) on mobile portrait?
Thanks!
Hi Victoria,
I’m confused. How is the enfold table element NOT a table? Either way, I would think Kriesi would want his table element to be responsive and mobile friendly–which currently it is not. Is there no solution to adjust the css for the table element to update the break points for when the columns split and stack as they do on the one and only break point that exists when it goes to a single column where they are all stacked?I suppose one other solution would be to create 8 columns but the theme only allows 5 columns. We could then do some custom CSS to have the columns split up using media queries.
Please advise. Thanks!
EricHi Rikard,
My apologies. I fixed a typo in my original post and clarified a couple things. I also included the page where the image caption text overlay issue appears (private area). You’ll note in the custom css below that we had to create media queries for each break point so the text would fit well at different screen sizes. Now that I think of it, this may be a feature request for future theme updates. :) But if there’s an easier way to have the overlay text fit well at each screen size, please share. Thanks!
Eric@media only screen and (min-width: 768px) and (max-width: 788px) {
.av-image-caption-overlay-center p {
font-size: 12px;
line-height: 1em;
}}
@media only screen and (min-width: 789px) and (max-width: 906px) {
.av-image-caption-overlay-center p {
font-size: 13px;
line-height: 1em;
}}
@media only screen and (min-width: 907px) and (max-width: 1023px) {
.av-image-caption-overlay-center p {
font-size: 14px;
line-height: 1.2em;
}}
@media only screen and (min-width: 1024px) and (max-width: 1073px) {
.av-image-caption-overlay-center p {
font-size: 15px;
line-height: 1.2em;
}}
@media only screen and (min-width: 1074px) and (max-width: 1287px) {
.av-image-caption-overlay-center p {
font-size: 16px;
line-height: 1.2em;
}}Hi again,
I’m adding to the support request the page where you can see the issue where the table is having responsive problems adjusting to the different screen sizes. Note how the header text starts to overlap other columns instead of the font size shrinking based on screen size and column width. Adding a media query to have the columns stack 8×1, then 4×2 and then 2×4 would allow enfold table elements to view well on any screen size.
Thanks in advance for any help you can provide.
Best,
EricHi Enfold Support,
Thanks for all your help with enfold theme support. You’re what makes this theme so popular. Regarding image caption text being response… is there a way to have the text fit the area of the image regardless of the screen size? You’ve added the responsive feature for other elements (example: special headers) but with image caption overlays you have to use media queries for pretty much each screen size. Is there a way to have the font size adjust to always fit within the text overlay container and never be too big or small for the image area without media queries?
Thanks again for all your great work.
Best,
EricOk, figured it out. Something must have changed with either how google manages their web fonts or how the Enfold theme does. Either way, I downloaded the font zip files from Google Fonts, uploaded them to through the import/export options within Enfold, hit save, and all my fonts are rendering with the correct font weight throughout the site. May want to inform users that whatever changes google and or Enfold made, some may need to reinstall the web font kits via Enfold’s font import settings.
Hi all,
I’ve been seeing the same thing. All was fine as of this spring but after one or two theme updates, we lost all the weight styles. We’ve installed the montserrat font through the theme options as well as applied to the header styles within the advanced styling options but nothing has changed. What’s odd is that on some pages the font weight comes through but on 90% of the areas where font weight within special headers is applied, it’s rendering as “normal” even though when using the browser inspector tool (firefox, chrome and safari, it shows that the font weight is right. Just visually it’s normal. Very odd.
Thanks
-EHi Ismael,
We tried multiple areas of updating the slider settings width and nothing seemed to work. The width of the entire slider needs to stretch as the site pages do. This means the background image should always expand to the edges of the browser. Unfortunately, the slide content width continues to stretch and even the fonts increase in size. Ideally we’d like the slider content to respond exactly as the avia page builder content responds to browser window size.Is this possible? We’ve played with a multitude of options with the slider settings with no luck. Thanks in advance for any assistance you can provide.
Btw, the slider’s canvas size settings applies to the entire slider width, not the slide content width.
If you expand the browser window to over 1550 wide the content continues to expand. But the Avia content stops expanding at the width we set in the theme options.
Regarding the layout for posts with no sidebar, how can we keep the content to be aligned left similar to how the the layout is when the sidebar is present? Thanks!
Hi Jordan,
Sorry for the delayed response. I forgot to check the notify me of replies via email. :) Below is the login info. I also took another screenshot of the issue. Basically the side margins/padding for the content adjusts as the browser window changes size. It’s a responsive slider but be great for the max width of the content (not background image) to be aligned with all non slider content on the page.
Thanks for your help!
EricAlso, how can we update the no sidebar post template to align left similar to how the with sidebar template layout? Thank you!
Victoria, if you’re able to provide a solution to make a specific sidebar appear based on the sidebar category (see above in Elliot’s response), how is it we can’t simply have the entire sidebar disappear by updating the sidebar.php file with a similar snippet of code?
Seems there could be a “display: ‘none’ ” script to make this happen.Hi Enfold Support,
On a related topic, is it possible to remove sidebars from posts of specific categories? We have different post types (by category) e.g. blog posts, press release posts, article posts, event posts, etc. Currently on our press release posts we don’t want a side bar. Instead of selecting the “no sidebar layout” in the avia builder widget, we’d rather simply have all press release posts not contain a sidebar. Is this possible through a functions.php or sidebar.php update in our child theme?Also, we’d like to keep the same left aligned layout of the post. We noticed that if we manually select on each post “No Sidebar Layout”, the post content becomes centered with an empty featured image placeholder at the top.
Thanks in advance for your help!
-EOk, I think I figured it out. EWWW image optmizer plugin was the culprit. it does add a ton of value in keeping our images compressed and SEO friendly. Any idea on how we can replace and or fix the incompatibility issue between Enfold 4.5.7 and the EWWW image optimizer plugin?
Hi Enfold Support,
I’m having the same problem. Upon updating to 4.5.7. Image layers in the slider either are out of position or in some cases the dimensions of the image are very large. Very strange. Will be running Health Check to see if any plugins are causing the issues with the update but hopefully there’s a quick fix you may know about. Thanks!
-EHi Guenn,
I tried your solution but I think I’m missing a step. I placed this into the quick CSS:
/* THREE FOURTH CENTERED COLUMN */
div.av_three_fourth.three-fourth-centered {
position: relative;
left: 50%;
transform: translateX(-50%);
}Then added in the Edit Column Custom CSS Class field “three-fourth-centered”. Should the custom css class sit in the section color class field?
How do you set a max width on a grid row element? We’re seeing that grid row elements and color sections don’t respond the same at different browser widths. Thanks!
Hi Josue,
Similar question regarding the styling of the promo box element. How do we add padding to the top and bottom of the promo box button such that it matches the left and right padding within the promo box element? We’ve tried similar techniques you mention above but it tends to break the text wrapping of the promo box element at certain break points on mobile and tablets i.e. only looks good a screen widths wider than 900px, i.e. the text / headline will start to overlap the button.Screenshot in private area.
Thanks!
Eric
