Hi Mike,

Thank you so much for the help. I’m almost done with the site and you’ve been amazing throughout the process. Can’t thank you enough, you guys do an amazing god damn job here. No wonder Enfold is at the top of the theme game.

Quick question regarding accordions. I’ve noticed a bit of a discrepancy between what happens on mobile and on desktop. Here is a test page that I’m using: http://www.bonjiglass.com/4004-2/#toggle-id-3 So on mobile, every time you click on a section, the accordion automatically scrolls to the top of the section, so you can see the entire list within. On desktop, it sort of does it with the second section, but when you then click on the third section, the first thing you see is “Spanish rice and beans”, which is the third item on the menu, not the first. Is there a way to make the accordion jump to the top of the section every time you click on the section (include the title of the section so that people know what they are looking at?).

Thanks,
-D

Hi Mike,

Appreciate your continued help. I have a problem where I make CSS changes, but they are not recognized on mobile, or it takes forever for the changes to take into affect.

For example, the “See why customers around the world love us” on the home page (bonjiglass.com). I edited the code to make the background black on mobile. It worked. I then take that exact same code, and edit it to add a pattern to the background and a colored overlay … the background remains black on mobile. Which is confusing, because the code thats telling it to remain black literally no longer exists. I cleared my cashe like 43 times at this point making other changes to the page.

Here is the code I’m using:

@media only screen and (max-device-width: 767px) {
	 #reviewinstagram.avia-section  {
		background-image: url(https://www.bonjiglass.com/wp-content/uploads/2019/01/congruent_pentagon.png) !important; 
		background: rgba(0, 0, 0, .6) !important;
		background-position: top center !important;
		}
	}

Can you please take a look?

Also, text blocks are not working properly for me on the FAQ page. They show up ok, but when editting the section, code brackets are showing up in the text and the text itself is white, so you can’t see it unless you highlight. Even happens when I create a new text block. Is this a wordpress 5.0 issue?

Thanks,

-D

• This reply was modified 6 years, 1 month ago by Dzimnikov.

Coolio, I got it to work. Thank you. I guess switching from hexadecimal to RGB did the trick. I never would have guessed. I also added a wood-dark background to the special heading background, but don’t know how to control the opacity of the wood-dark.

A few more things, though I’m getting pretty close to being done. Apologies for the continues requests.

One the “http://www.bonjiglass.com/ourstory/” page, I was able to change the image for mobile devices, but don’t know how to add a black overlay to it. Here is what I used:

@media only screen and (max-device-width: 767px) {
	#besthit.avia-section {
		background-color: rgba(0, 0, 0, .7) !important;
		background-image: url(https://www.bonjiglass.com/wp-content/uploads/2016/06/grainpass.8.png) !important;	
		background-position: top center !important;
		}
	}

I tried various variations of “background”, “color”, background-color” but nothing worked. Not sure why.

Also, in that section, the rotating blue text is centered on desktop, but not on mobile for some reason. It leans slightly to the right of the white text above it. I’m referring to the blue text that rotates between “free pizza”, “star wars”, “dubstep”, etc.

Appreciate the continues support!!! Almost there!

Hi Mike, Happy holidays and Happy New Year. Hope you had time to celebrate and rang in the new year in style. Wishing yall all the best in 2019!

From your last message, its seems like the CSS i put into style.css may or may not work, unless I constantly save my “theme options”. From my experience, it has normally worked for me, though sometimes there is a lag time on mobile. I prefer style.css to the Quick CSS area for the exact reasons you mentioned in a previous reply, style.css has a wider typing area, helps me organize my code, and lets me know when I’m making errors and what the errors are. Quick CSS just isn’t as easy to use.

Regardless, I’m still having trouble with two things:

1) Lowering the opacity of the backgrounds, and only the backgrounds (the ones that we custom made in CSS), of the special headers on the homepage. I want the text to remain at 100%, but bring the background color to .5 opacity. So far we’ve only been able to bring the background AND the text to .5, which I don’t want.

2) Remove the hotspots on mobile. We both used the same code, but for some reason its not working on my site.

I’m going to include the URL and login info for my site below. Please help me out here, I would really appreciate it.

Thank you guys for the continues support, you rock!

Hi Mike,

Regarding the screenshot, its close but not quite. I’m looking for something similar to the slider at the top of the page, where the text itself remains bold and at 100% opacity, but the background (in this section black and pink) are at a lower opacity and blend with the background. In the screenshot, both the background and the text are at .5 opacity. Does that make sense?

For the hotspots, I essentially had the same code as you, just put the # before the div. Either way, I tried it out and no cigar. Also, the previous mobile editting code that you gave me, that worked before, no longer works for wtvr reason. I’m referring to this code:

@media only screen and (max-device-width: 767px) {
	#top #reviewinstagram .av-parallax-inner {
		background-image: url(https://www.bonjiglass.com/wp-content/uploads/2018/12/longchill1.png) !important;
		background-position: top center !important;
		}
	}

I refreshed my cache and everything. Sorry that I keep bothering you, just trying to figure this out.

Dank. It worked. Thank you so much! A little confused why we used “flex_column_div” the first time and then took it out when we tried to be more specific to a section. I guess you have to know what each identifier does and when to use it … will have to come with experience.

I tried to lower the opacity of the background by adding in this: “opacity: 0.5 !important;” but it lowered the opacity of the entire section, not just the background. How do I isolate and identify just the background, so I can lower its opacity while keeping the text within it at 100%.

Hi Mike,

Thank you for getting back to me. I tried your code and it worked. I then tried to add in the name of the colored section and it worked, was even able to isolate one of the two special headers in the colored section using div.avia-builder-el-17.

Thank you sooo much for helping me out here, CSS is a bit tricky, but I’m kinda getting the hang of it.

I then tried to add opacity to just the background, but it dulled out the entire section including the text. Is there a way to just set the background to be transparent? Like is there a way to add that command inside of: “background: black !important;”

Also, is there a way to control the width of the background. Can I do padding-left: -20px or something to that degree?

Much appreciated,
-D

• This reply was modified 6 years, 2 months ago by Dzimnikov.

Oh wow, I was so close! Thank you for filling in the gaps for me Mike, you guys do a great job!

Happy Holidays!

Hey, just to follow-up.

I found this post: https://kriesi.at/documentation/enfold/color-section/#toggle-id-9

and attempted to use the code there, as follows:

@media only screen and (max-device-width: 767px) {
	#top #reviewinstagram {
		background-image: url(https://www.bonjiglass.com/wp-content/uploads/2018/12/longchill1.png) !important;
		background-position: 0% 50% !important;
		}
	}

Its still not working for me. I’ll continue to follow the steps that Ian took here: https://kriesi.at/support/topic/alternative-images-on-mobile-devices/#post-1039845

but would appreciate any help on your behalf. It seems like every website is slightly different, depending on the plugins and whatnot that someone includes on their site. I also just tried adding in the jquery code referenced in the thread above and that didn’t work.

Generally speaking, I would also love to learn how to make changes to sections on mobile. Will help me become a more well-rounded developer.

-D

• This reply was modified 6 years, 2 months ago by Dzimnikov. Reason: More perspective

Talked to hosting company. Issue resolved

Also, whenever I create a new Page, the Avia Layout Builder is non-existent.

I can only access it if I duplicate pages or edit already published ones…

Please help!

I added the debug code but it didn’t really do what I needed it to.

I understand that the parallax is disabled for mobile, but whats left is a tiny version of the featured image with black around it. I would love to change the image in that section for mobile, either with a more vertical version of the image or with a straight background color.

Can you please advice me of the CSS code I need to make this change. Or php code. Or a way I can access the html version.

I’m sorry if I’m being too much of a bother, but I hope to make the site look perfect and learn a bit along the way.

Cheers and happy holiday weekend.

-Daniel

I can put sectional borders around each particular element, but thats a pain in the butt.

In general, is there a way to access the inspect-like html code? Is there a way to change section identifiers? Or is it all done in PHP?

Also, whenever I try to give sections (like colored sections) custom CSS names, it never works. I gave the order section section on the front page the name ContactForm, then put #ContactForm as the link for one of the buttons in the slider. No go!

How does this work?

I wish i can upload pictures here. The kit shows up, with the drop down display. When you actually go to select something from the drop-down, none of the variations show-up. Its essentially an empty drop-down. Everything is configured in the back end.

It seems that the systems knows that the variation exists, but can’t locate the choices.

Do you think its conflicting with another plugin?