Hi all,
I’ve searched for it but not sure if it’s been done. I have a work page using a parallax plugin for desktop versions. However, the parallax images aren’t responsive and don’t scale well for mobile screens.
My question is: When viewed at a certain size (like mobile screens) can I call up a different page in place of the page used for my work page.
What I want to do is replace my work page with a simple masonry gallery for mobile screens. Or even keep the page, but replace all content with a masonry gallery when on mobile.
My work page: http://marienlely.com/work
I would like to replace it with a masonry gallery. An example of a gallery I already have is shown at the bottom of my homepage. This shows all my work links, but in condensed masonry gallery form.
Home page: http://marienlely.com/
Another solution could be removing the work link from mobile and just showing the home page. Since the masonry gallery is already here I can use that as my work mobile page as well. I would prefer option 1 though if possible.
let me know if this is possible. Thank you!
full screen slider does not have the ability to have any content on top of it.
or am i wrong?
Thank you Ismael. Work like magic :)
also done that from child theme like this: https://kriesi.at/support/topic/edit-shortcodes-js-in-child-theme/#post-399336
Hi,
you can make a version for mobile only if you want. Just use custom class and hide the elements on desktop only and vice versa. Use something like:
@media only screen and (min-width: 767px) {
.your-custom-class {
display: none;
}}
to hide the elements on a screen size higher than 767px. Adjust as needed. You can also use (max-width: ) if you want. For more information about media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Feel free to hire a freelance developer if you need the job to be done by someone else: kriesi.at/contact/customization
Best regards,
Andy
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
To increase the gap between heading and subheading
.av-subheading_below {
margin-top:150px!important;
}
To align the captions in the image
.av-image-caption-overlay p {
text-align: left;
margin-top: -70px!important;
}
Let us know if you have more questions
Best regards,
Vinay
Dear team,
I have tested many hours, have read topics and manuals :-) but I havent found a workaroud. On this page http://goo.gl/yw1LPJ comes the footer with (I think) parallax effect. I scroll down and then I see the footer – he ist not static like on the demos.
How I can build this in enfold? You have ideas?
Thanks for the perfect help!
-
This topic was modified 9 years, 8 months ago by
SDUS.
Hi,
Sorry that probably would have been helpful. Link to site is http://new.fcsafety.co.uk/
The elements in question are on the header image at the top of the page, just under nav menu there is a special heading “Safety Training….” then “You know it makes sense….”. I have managed to reduce the safety training H1 but I would like to also reduce the you know it makes sense sub heading accordingly so it stays a relative size to the heading.
I also would like to increase the padding between the heading and the subheading if this is possible?
In addition I have 5 images in columns all with captions, starting with mechanical handling equipment. Ideally I would like the caption to be left aligned and at the top of the image.
Thank you.
Hi Ian,
Try adding !important to Yigits code:
#top .onsale {
top: -45px !important;
background: orange !important;
color: red !important;
}
Regards,
Rikard
Hi,
I modified avia-element-behavior.js and shortcodes.js as the topic says, and the map isn’t showing. What can I do?
Thanks!
Hi,
Try the following as well:
.header-scrolled strong.logo {
padding-top:5px !important;
}
Best regards,
Rikard
Hi,
My problem was to display 2 sentences of text on small screen without overlapping.
I have just found last night a better approach: i will hide the text on top on small screens and display the informations on a text block on my home page using CSS to display this block only on smartphones and tablets.
You can close the topic please.
Thanks
Regards
Guillaume
thanks, please check again, i can even see on your screenshot, 2 times X for close the lightbox at the top right and this flickers between them, a magnify icon also appears which i think is not usual.
Hi Dörte,
I’ve tagged the topic for our german speaking moderator, please wait for his reply.
Best regards,
Rikard
Hi @vadikcoma,
Please start a new topic and post admin login details in private so that we can have a closer look.
Regards,
Rikard
I just added a quick css which enable the logo overlap the slider on below. Initially this logo need to be shrinks down together with the sticky menu on scrolling up. Have tried several things, but none of them work as i aspect to. Possible to make this responsive on both mobile & desktop?
Appreciate if someone can assist me. Thanks.
Logo is overlap the slider
http://goo.gl/MJbhjf
logo do not shrinks down together with sticky menu
http://goo.gl/TThW0b
This is what I need on the result
http://goo.gl/6xBuxi
-
This topic was modified 9 years, 8 months ago by
promat.
Hey nexxraller,
I’ve tagged the topic for our german speaking moderator, please wait for his reply.
Best regards,
Rikard
Hi, we have been losing a lot of time trying to customise the spacing at the top of http://rubicab.com.au
What we want to achieve is:
1. MUCH LESS WHITE SPACE AROUND THE TEXT which says
We Design, Supply & Build Outdoor Decking, Fencing Projects, Granny Flats with Innovative and Low Maintenance Building Materials
2. A bigger LOGO – we have a 500×167 image in there at the moment but obviously something in CSS is constraining it. Ideally, the logo should not be tied to the white space under the menu items.
3. Lower down: Reduce the spacing between “What our customers say about us” and the pictures under them.
3. Please supply code we can put in Quick CSS
Thank you.
-
This topic was modified 9 years, 8 months ago by
cblajos.
Hi,
Very very strange stuff is happing to one of my client sites http://farmersmark.com
All links (including the main navigation menu) are the browser default blue and purple.
This is the same site that the header background color disappeared and we had to add the #header color in the custom css.
I also just noticed that the mobile menu no longer appears.
What the heck is going on?
Here is what I have done:
Disabled all plugins, deleted all custom css, all custom code in the function.php file. No luck
I then totally deleted the enfold theme and uploaded a fresh install. Still no luck.
I then tried to start over with a new child-theme only to find out that info must be stored in the database because the new child-theme immediately took on all of the styling of the old one except for the custom.css.
Any ideas? I’m not sure what to do but each time I need to do something to the website it seems to show more issues. I am the only one with WP admin or FTP access.
Thanks,
Slade
****Update**** Things may look “normal” when you look. I had to individually set the color of all the links in the child-theme.
If you look in the child-theme stye.css file you will see at the very top everything I had to “temporarily” fix.
-
This topic was modified 9 years, 8 months ago by
Sladestyle.
Hi Phil,
Great, please let us know if you should need any more help on the topic.
Thanks,
Rikard
Hey hannerinc,
I’ve tagged the topic for our german speaking moderator, please wait for his reply.
Best regards,
Rikard
Hey a-l-p,
I’ve tagged the topic for our german speaking moderator, please wait for his reply.
Best regards,
Rikard
Hey Doron!
Thank you for using Enfold.
The play container covers the stop container. Define the width of those containers.
#mysecstopdiv {
left: 50%;
width: 50px;
}
#mystopdiv {
left: 45%;
width: 50px;
}
There are different ways of doing this but you can start with that.
Cheers!
Ismael
Hey!
1.How can I adjust the position to move it just little?
Use this css code:
#top .onsale {
margin-right: 20px;
margin-top: 20px;
}
2.The main problem is, that the “sale!” changes color when the picture has a hover effect. This is depending on the browser: in edge it goes to red, in safari it is getting bold?? Please go on the “shop” page and and check this.
I can’t reproduce the issue on my end. Could you please provide a link where we can see the issue?
3.Last but not least: The badge should be a forced circle.
Please use this:
#top .onsale {
height: 40px;
}
Best regards,
Ismael
Hi!
If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing. Thank you.
Regards,
Ismael
Hi,
I’m not sure if this will clear things up. https://kriesi.at/support/topic/renitent-color-picker/
Are there any significant difference between the two color values?
Best regards,
Ismael
Hi,
Thank you for the info. Unfortunately, the theme breadcrumb in a single post page can only display categories of the posts. It cannot display the pages because it has no connection or relation to those pages. I’m not sure if the yoast breadcrumb will work in this case. Replace the default breadcrumb with yoast: https://kriesi.at/support/topic/make-breadcrumb-path-follow-primary-category/#post-607364
Best regards,
Ismael
Hey gerardbao,
Thank you for using Enfold.
Please add this in the Quick CSS field:
#top .avia-smallarrow-slider .avia-slideshow-arrows a {
top: 0;
width: 60px;
height: 60px;
font-size: 50px;
line-height: 62px;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows .prev-slide {
left: 0;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows {
width: 100%;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows a:before {
line-height: 60px;
}
Adjust the values as needed.
Best regards,
Ismael
Hi,
We added this code in the functions.php file:
add_action('ava_after_content', 'ava_after_content_mod', 10, 2);
function ava_after_content_mod($content, $context) {
if ( $context == 'error404')
echo do_shortcode("[av_productslider categories='142,85,158,173' columns='3' items='9' offset='0' sort='0' autoplay='yes' interval='5' custom_class='']");
}
Best regards,
Ismael
Hi,
I’ve just checked the Quick CSS and I can only find the following codes:
#top .slide-meta {
display: none;
}
#top .slide-entry-title{
color: #3E4D5B;
}
#menu-item-6927 a {
background: #3E4D5B;
padding: 3px 10px;
font-size: 10.5px;
}
.page-id-5447 #av-layout-grid-1 {
min-height: 430px;
}