Oh yeah. Thanks

reposted below

reposted below

Hi Jordan and thank you for your help, but this is still a problem.

Josue showed me how to do this over a year ago here with a Code Block (the only change I made was to switch from “contact” to “connect”
https://kriesi.at/support/topic/anchor-without-color-section/#post-452955

Let’s stay with the Code Block method. It works as well as your Color Section method.

The problem is, even with your Color Section solution and the Code Block solution, both do not scroll to anchor. Selecting the Main Menu link “Connect” reloads the page, then goes to anchor position. No scrolling.

1. I tried your Color Section by doing this:
I have cleared the cache on the web host and the browsers and attempted to scroll to anchor on the latest versions of Safari, Safari Technology Preview, Chrome, Chrome Canary, Firefox and Firefox Developer Edition. It does not scroll.

2. The same thing happens with Josue’s Code Block solution. Why is it not scrolling on ALL of those browsers?

I’m sure it is a simple solution.

Thank you for your help,

Jasmer

Perfect. This is what I used. But I asked a question above I’d like understand

“Why does the Enfold theme not center these automatically? I’d like to know if there is something I can do differently, because I don’t want to center the fields via CSS on different devices every time I build a website.”

Do I need to use a different element? This element should renderr correctly without custom CSS.

@media only screen and (max-width: 767px)  {
.page-id-18 .avia-builder-el-2{
padding:25px!important;
padding-top:45px!important;
}}

Thank you so much for your help,

Jas

Hi Yigit,

I need one thing, to make the all the landscape images on my site to be full frame with no giant white space below the image. (See screenshot in Private Content below) I do not to replace the images. It takes forever to find excellent images. There has to be way as this has been successful on other sites.

This is not just about one image. I need others adjusted. Please look at the other images listed below (in Private Content) to see what I am talking about. This is more than a width problem. People’s heads are cut off, all the people don’t fit in the photo, etc.

Perhaps we also need to use CSS to resize the height of the Color Section or use a different element. This is a problem on almost all of my sites. I would like to find a permanent solution for this so I don’t have to bother you guys with this problem on every site.

Thank you so much for your help Yigit.

As I mentioned this CSS below, worked to some degree, but still with problems. I put the CSS back on the site so you can see the problem when you go to the site on your mobile device. The CSS below worked for another site with the similar image dimensions. (See Private Content below for the other site.)

@media only screen and (max-width: 767px) {
#home-slider-image .av-parallax-inner.main_color.avia-full-stretch {
    position: relative;
    top: -200px;
    background-size: contain !important;
}} /*home slider image + uncrop width*/

@media only screen and (max-width: 480px) {
#home-slider-image {
    background-position: 50% 0%!important;
    background-attachment: scroll!important;
}}

• This reply was modified 7 years, 6 months ago by Jasmer.

Hi Jordan,

Yes that is good. But I’d like to increase the top of the overlay by 20px as well.

I wasn’t everything to stay the same, but I want the white overlay to be taller at the top by 20px. Can you help with that?

THANK YOU,

Jas

Hi guys!

I know you are crazy busy, but I am hoping to launch this site before the weekend. I’m sure it is an easy fix. It’s urgent.

Help!

Thanks,

Jas

Thank you sir!

Victoria, yes please test the forms.

Thank you, Jas

Yes please test the forms. Thank you, Jas

Hi!

This seems to work to hide these elements on the desktop site. Is this correct?

/*Hide Team Profiles on Desktop Site*/

@media only screen and (min-width: 767px) {
.team_image_1 { display: none !important; }}

@media only screen and (min-width: 767px) {
.team_image_2 { display: none !important; }}

@media only screen and (min-width: 767px) {
.team_image_3 { display: none !important; }}

@media only screen and (min-width: 767px) {
.team_image_4 { display: none !important; }}

Thank you,

Jas

• This reply was modified 7 years, 6 months ago by Jasmer.

Hi Jordan,

I need specific, full and verbose directions.

Do I need to put everything in a color section and apply a Section ID? I don’t particularly want to add color sections and I don’t see a way to add a Section ID without adding a color section. I’d prefer to keep the structure as it is and hide and show the existing blocks..

As you can see there are many layout blocks that would have to be addressed.

Thanks for your help,

Jas

Jordan,

You’re awesome! Excellent idea💡

1. Desktop Site: I’d like to have ONLY the first 4 bios shown as they are.

2. Mobile Site: I’d like to show ONLY the last 4 bios shown as they are.

3. Desktop Site & Mobile Site: I want to keep all other elements on both sites. There are elements above and below them.

Note: I did not use the bio blocks normally. I added text blocks and font blocks and then put them in individual 1/1 layout element containers.

What would be the correct classes for this? I’m far from an expert at this.

Thanks so much,

Jas

Hi Rikard,

Ok I didn’t know it was part of the design. Can you send me a link to a demo that shows the background being used in the logo element slider? I’d like to see it.

Thanks,

Jas

Yigit,

Excellent! Thank you. I had to add the below to drop it down enough.

top: 165px;

There is still a slight problem. The photo on the desktop site is perfect. The photo on the mobile site crops the right and left side of the photo and I cannot see the team members on either side.

Why does that happen?

Thanks,

Jas