Forum Replies Created
-
Posts
-
Hey Mike,
Thanks for getting back to me. I did not realize that the hotspots and the text that goes along with them are separated in the code you gave me. Thank you for changing the font to black. Now that I can see the text, I guess I’ll keep the hotspots on mobile. Appreciate your help.
Regarding the background, we are still not on the same page as to which background we are lowering the opacity on. Please see the image below:
https://screenshots.firefox.com/XvvV8mncJcmx040R/www.bonjiglass.com – the pink background in the back. I’m looking to lower the opacity of that rectangle to .5, BUT NOT “And all the fun we are having on instagram”, aka the text. Looking for a similar effect as this: https://screenshots.firefox.com/9LELckDWVHCgbIop/www.bonjiglass.com
Does this clear things up? I know its confusing, I apologize for not making it clear.
______Here’s another thing I’m having an issue with. There is probably an easy fix that I’m not seeing, in which case, my bad. So I want to have three images centered within the bottom of a color section. At the moment, I have them centered like this: https://screenshots.firefox.com/DbCnRqEm2FjmhIpa/www.bonjiglass.com
When I try to make the images larger, or have them take up a bigger part of the screen’s width, I can’t center them because you can’t create elements that are 1/8 the width of the section (which I would then put around the 1/4 elements). Everything aligns left like this: https://screenshots.firefox.com/3LLmI4ytigTIgbgc/www.bonjiglass.com
How do I get those 3 1/4 images to center in the middle of the page?
Thanks,
-DHi 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!
Im looking to have the background at .5 opacity, but NOT the text. So background 50% and text at 100%. Right now, I’ve only been able to get both the background and the text to 50%.
Ye, I’ll take a look. The mobile background code is now working, but not the hotspots.
My CSS is currently under Appearance – Editor. Its the style.css file i think.
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.
Hi Mike,
I tried out the code above, both in the general CSS editor where I normally add code (Appearance – Editor) and then in General Styling. It didn’t work either time. Still trying to figure out why.
Ran into another issue as well. In the section called “bottleview” (with the gold label bottle on the right), I’m looking to remove the hotspots attached to the image on mobile devices. I tried the following code:
@media only screen and (max-device-width: 700px) { #divbottleview div.av-image-hotspot.av-display-hotspot { display: none !important; } }Didn’t seem to work, though I was able to resize the image itself with a similar code.
Thanks,
-DDank. 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 the quick response. The “show elements option” is a life saver, excellent advice!
I re-named builder-17 to “customerlove” and builder-22 to “instagramhome”. I was able to swap out the names and the backgrounds are still there. Good stuff!
Those are the sections though where I want the opacity change. It seems like the code in your response changes the opacity of the overall color section (reviewinstagram), but not the custom made backgrounds within the special headings. I added in .av-special-heading and even a .customerlove to be more specific, but neither worked. It seems like the “.active-parallax” div controls opacities, but I’m not sure it extends beyond the color section itself.
The second code you sent me changes the width of the backgrounds. It works!!! I tried to add .customerlove into the code to make it more specific, but it didn’t work… which is weird considering that it worked when creating the backgrounds themselves. How do I properly add them in?
Sorry for all the questions, but your responses are really helping me understand how CSS works. The more various examples I get, the better I’ll become. I truly appreciate your help.
Thanks,
-DHi 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,
-DHey yall.
Need some quick CSS help. As you can tell on the homepage (bonjiglass.com), the slider at the top of the page has text that sits in a black background with like .5 opacity (Spark Your Next Adventure). I was able to create that using the setting in the slider.
I’m looking to create a similar feel for special headings. For example, if you scroll towards the bottom of the page, just above the contact form, you will see that I was able to create a black background around “See Why Customers Love Us Around the World”. Its just a black box though, I want to be able to style it the way I did with the text in slider (as described above).
Is that possible?
Thanks,
-DOh 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
Are y’all planning on releasing an update with this function at some point?
I’ve tried multiple plugins and none of them seem to be able to pull the native reviews. Are there any plugins you would recommend. Otherwise I’d have to copy and paste each review, which is a pain in the ass.
Thanks,
-DI tried to re-upload the theme, but had to delete the child theme. Just realized that all my CSS work and customizations that were a part of the child theme are gone. Is there any way to get the child theme back?
Or do I have to create a new one and start over?
Sorry for the repeated posts, but I’m losing my mind over here. Things are falling apart and I’m seeming to make it only worse and worse
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 figured out that you can make two sections, one that ill hide on desktops/tablets, one that ill hide on mobiles.
I named the section socialjustice, but when I use .socialjustice as an identifier, it doesn’t work.
Here is the code I’m using:
@media only screen and (max-width: 728px) {
.socialjustice {
display: none !important;
}}What a I missing here?
To follow up on this, is it possible to simply replace a parallax with a normal background (image or color)?
Do you guys know how its done? Would be beyond helpful.
I’ve been trying, trying, trying to use the @mobile stuff and its just not working.
I don’t want to simply disable the parallax, I want to replace the parallax effect with a simple background (image or color) on mobile – while keeping the other elements there.I do not want to hide the entire section on mobile.
According to you guys, the code automatically disables the parallax effect. This leaves a tiny version of the desktop image sandwiched in between two black boxes. Is there a way to get rid of this small image and black boxes and replace it with a different background? In theory, the code should be pretty simple, but its not working. I tried using your code from the previous message as a test and it didn’t work.
At the moment, I would prefer not to hire a freelance developer. This is not a complicated issue. In the past, I’ve had theme support go into my site and make the changes for me. I’m even asking for that, but can you please help me get this done.
Thank you
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
Also, I’m running a parallax on the home page but it doesn’t work well on mobile. I want to change it to a solid background or possibly an image specifically for mobile.
I tried:
@media only screen and (max-width: 500px) {
#love {
background: blue; !important
}
}but it didn’t work. I named that specific colored section “love”.
I don’t think it overwrote the parallax in general.
How would I go about it?
Thanks!
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?
Please see attached url for reference.
I want to put a border around the contact form + the text to the left. Just around those elements, not the entire colored section (though i tried to give it a border with a specfiic name, as instructed in the link from your reply, but it didnt work).
When you inspect, the name of the section is:
“.post-entry.post-entry-type-page.post-entry-10”
Which is also the name for several of the section above it. Thus, when I apply a border to it via CSS, the border applies to all the sections with the same name. If I could change the “10” to an “11”, or something to that nature, then the container would have a unique identifier, no? How would I go about doing that?
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?
Hi, I’m having a bit of trouble with woo-commerce.
I added variations to a product (based on an attribute), but the variations and their differences don’t show up. The item comes with different kit types, which come with different items, which I added to the back end, but that is not represented.
How do I fix it? Name of the item is Cube 3D. Log in deets are in the first post.
It really weird that display:none works like a charm, but font-size: 10px doesn’t. This absolutely baffles me, as I literally had the exact same code as you, but one css command worked and the other didn’t (still doesn’t). No idea why its like that.
Is there a way to increase the slider height on mobile, so that I can include the description, while also making the caption and descriptions smaller. That way I can fit everything in?
Cheers
I included admin details in private in the first post.
I was testing the look on mobile devices. I have a one plus one and this is what the slider looks like on it: http://tinypic.com/r/2i12fwn/9
As you can tell, the text doesn’t adjust to mobile at all. The CTA button is pushed below the frame, making the slider inherently useless. The one plus one has a small screen, hence the small screen parameters.
I’ve tried various things, nothing works. Can’t tell if I’m identifying the screen size improperly or declaring the properties that need altering improperly. Either way, its frustrating. Such a simple concept in theory.
Its not responding at all too my inputs.
Perhaps I’m putting in the code wrong? Or it doesn’t recognize the screen parameters? I even tried increasing the height of the overall caption section, so that the text/button will show – nothing. Something like this:
@media only screen and (min-width: 250px) and (max-width: 480px) {
.container.caption_container {
height: 150px
}
}I’ve used css before to manipulate themes, but only on desktop really, to move things around and change colors.
What am I missing here?
Does it not look on a tablet either? Whats the screen size of the tablet? Will have to test this at home. Will the frame around the text adjust as well if I edit the size of the text through css?
Also, you guys used to have an edit css section under the appearance tab in previous versions. Is that gone forever in new versions? Is the small box in “general styling” the only way to edit css now?
