Forum Replies Created
-
Posts
-
Hi Rikard. Thanks. I just added that code to Quick CSS, but it did not resolve the issue. Please advise.
Thanks. I used that code and once I put “!important” it worked! However, it throws off the spacing at the top of the site when I resize it to the mobile version. See here: http://snag.gy/i3fiV.jpg
Please advise.
Sorry, but what do you mean by “your related posts seems to be on a full width”? I am not quite sure about what you are referring to or what exactly it is that you want me to remove. Please advise. Thanks.
I was able to resolve the CSS issue. Thanks for looking into adding a simple option to turn the mobile search option on/off as part of a future update. That would be very useful to have, since it seems a lot of people are having problems with this issue (based on all of the support posts from others on how to add a mobile search option).
You can close out this ticket.
I was able to accomplish what I needed by simply increasing the max-width to 2000px as shown below.
/*Increases the size of the search icon in header area*/
@media only screen and (max-width: 2000px) {
#menu-item-search a {
font-size: 22px !important;
}
}You can close out this ticket. Thanks!
OK. Here is an example with screenshots:
Full desktop view of web page indicating where the responsive ads are placed and how they appear: http://snag.gy/oHb6X.jpg
Mobile view of web page indicating where those responsive ads are being cut off: http://snag.gy/3QfzV.jpg
Both screenshots were taken from the following web page: http://latitudes.org/behavior-charts/
As mentioned in my original post, I inserted the responsive ad code into the Page Builder as widgets, since that seems to be the only way to get responsive ads to show up in the Page Builder. The only problem is that the ads are not actually responsive when they are inserted into the web page using that mechanism.
If I insert the responsive ad code into a regular web page (without using the Page Builder), then they work just fine when I resize the web page to mobile view, so it clearly seems to be a problem with using responsive ad code within the Page Builder software.
Please advise.
Thanks. I tried that other solution, but it put the search box on both the mobile site AND on the desktop site. Are there any other simple solutions to get this resolved? Also, do you guys have any plans on adding this functionality directly into the theme as a standard setting turning mobile search on or off?
Having a search option on the mobile site seems like a must-have feature that should be standard in any responsive theme… especially one that is as flexible as Enfold. Please advise.
Thanks for the reply, but I don’t fully understand your response. The code you are referencing appears to be the same code that you commented out. If I un-comment that code and remove the media query, then the search icon looks small on all screen sizes.
Please clarify what I need to do in order to have the search icon big (to look the same size as it currently looks on “non-mobile” smaller screens.
Thanks.
Hi Yigit. Thanks. It appears to be working on pages, but not on posts. Shouldn’t the Advanced Layout Editor work on both pages and posts? Or does it only work on pages?
I see the following in my profile: Visual Editor – Disable the visual editor when writing. That box is already unchecked, so there is nothing for me to uncheck.
Ygit, can you please log into my account and take a look?
Thanks
I tried following your steps, but it still isn’t showing up on the mobile site. Please try using the login details that I provided in my last reply and see if you can figure out why it is not working. Thanks.
Thanks. I took a look at the site. The search icon is big when I resize my browser down to a much smaller size, but the search icon is still small when the browser is shown at a normal or wiser size. Please advise.
I tried that and it still isn’t working. I’m posting my login info in case you want to take a look to see what is going on. Thanks!
Hello. I added the two sets of code that are referenced on that page to my quick css, but the search icon is not showing up.
@media only screen and (max-width: 989px) {
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
display: block;
}
li#menu-item-search {
margin-top: -90px;
}}
@media only screen and (max-width: 480px) {
li#menu-item-search {
margin-top: 0;
}}Please advise. Thanks!
Is there any other option (perhaps some different CSS code) that I can use to just enlarge the search icon on the desktop version of the site without needing to learn about all those different media queries?
I tried using one of those media queries already and was unsuccessful.
Hi Basilis, Thanks for the reply. OK. Let’s skip having the search bar below the header.
Is there some other simple solution for giving users the option to search the mobile version of our site? E.g., adding a magnifying glass in the header area or adding a search option within the mobile popup menu, etc.
Please advise how I can enable search for our mobile users. Thanks!
Hi Andy,
Thanks. That looks great when the header shrinks, but I don’t want for the widget to bee so close to the top menu prior to shrinking (e.g., when the header is displayed in the normal full size state). It looks off balanced, since there is so much white space below the header widget.
Is there any way for the widget to only move to that higher position (margin-top: -32px) when the header shrinks, but for it to stay centered vertically when the header is in its normal full size state?
Please advise. Thanks!
Thanks for the reply. It looks better using your code and also using the following code:
@media screen and (max-width: 1024px) { #header_main .widget { display: none !important; } }
On a related note, I noticed that if I make the header “sticky” and “shrinking” that the contents of the header widget don’t shift up when the header shrinks, so they end up overlapping the main menu bar. Is there any CSS code to handle the behavior of the header widget when the header shrinks, such that it does the following:
1) Have the buttons move up horizontally to match the same vertical height as the logo; and
2) Have the buttons shrink in size (just like the logo does). I could always create a separate set of buttons that are smaller just for that shrunken view only if there is a way to accomplish what I want to do (e.g., show the big buttons when in regular view and show the smaller buttons when in shrunken view).Please advise.
OK. Thanks for the reply. In regards to the ALB CSS option, if I enable that setting, do I then need to assign custom classes to EVERY single element? Or can I enable it and then just assign a custom class to one particular element that I need to over-ride the CSS settings for? Please advise.
Hi Yigit. That worked very well. Everything is in one column now. The only remaining issue that I see is that the mobile version of that page moves side to side (if you move your finger left to right on the screen of the phone) and it also allows you to zoom out (if you place your two fingers on the screen and then spread them apart), which normally is not permitted on a mobile version of a site. It never did this behavior on this page prior to us activating the Enfold theme. Is there something that needs to be added into the CSS to prevent that from occurring? Thank so much.
