I was able to fix this with this code:

@media only screen and (max-width: 767px) {
/* fix for 3 columns on mobile */  
 #top .flex_column.av_one_third {
width: 100%;
margin-left: 0;
}

}

as suggested on this other thread: https://kriesi.at/support/topic/after-updating-images-in-columns-are-no-longer-responsive/#post-222975

NOTE: it works only on 3 columns layouts and it was not necessary any fix before the update, so a more stable solution would be ideal

Hello Yigit,

Removed! You are a freak!

Thanks very much, because it looks great!

I am delighted with my page and your theme.

Regards, Raúl.

That did the trick, only thing I had to do was make sure I didn’t include
#header_meta { display: none!important; }

I did it successfully with:

#header_meta { margin-top: -30px; }
#header_meta .container { margin-top: -30px; }

Thanks Yigit, I’d buy you a beer if I could lol.

So my question is very simple–at least for me to simply ask it. ;)

How do I get the homepage to look and behave exactly like the test page in Chrome?

I have now tested on five different machines–same issue. The problem–with very little room for rational doubt–is with how Chrome interacts with this part of the theme. Please see my screenshots. Thanks!

Edit: It occurs to me to mention that you cannot see the difference on Chrome re the parallax scroll effect on and around the rock image on mobile devices–only on desktops and most laptops (but my users mostly use conventional PCs).

Richard -the fixes offered simply do not work. The code I used was given to me by the support team. Thank you for your insight on the 480px. I’ll look into it.

I do have the right to express my concerns. Both times my topics were abruptly closed, the last time it happened just after I had asked more strongly why these snippets of code were not working. I took it to be the same as being ‘hung up on’ by customer service. I just don’t know what to think right now. Pretty much between a rock and a hardplace.

Devin,
My mistake for not looking for what was considered ‘deep customizations’ before purchasing the theme. I guess I bought into the “Enfold is a powerful Theme that comes with an easy drag and drop admin interface.” copy of your sales-side website.

Hello Yigit,

I have done this changes in the css, like Josue post but adding spacing and a line between menu and social icons:

#main{
padding-top: 117px !important;
}
.social_bookmarks {
position: absolute;
top: 42px;
right: 0;
}
.header-scrolled .social_bookmarks {
top: 14px;
}
#header_meta {
height: 0 !important;
min-height: 0 !important;
}
.sub_menu {
display: none;
}
#top .main_menu {
right: 110px;
border-right-style: dashed;
border-right-width: 1px;
padding-right: 25px;
}
#top .social_bookmarks li {
border: 0 !important;
}
#header_main .social_bookmarks {
right: -25px;
}

See at: http://solucionestecnologicasparaempresas.com/

What do you think?

Thanks, Raúl.

• This reply was modified 11 years, 11 months ago by ribanezg.

That has not fixed the issue of the 4 columns in the footer not being responsive. It also does not address the spacing problem originally stated above.

#top .flex_column.av_one_third {
width: 100%;
margin-left: 0;
}

“With the fix that you sent, the images from the first row get stacked tight up against each other when it goes to mobile while the images from the other rows all have wider spacing between them when they go mobile.”

Everything was working fine prior to the update. How can I fix this without having to experiment with adding Quick CSS? Do I need to reinstall the theme?

Hey Yigit,

I’m currently working on the site via Mamp. I added in that and it didn’t work the phone number just disappeared along with the top navigation grey bar.

This is how my header looks right now: https://www.evernote.com/shard/s77/sh/9c679ed9-c898-4326-92dc-98378895de09/ebeaeceae08f14c70a4072a457952561

Here is my Source Code: https://www.evernote.com/shard/s77/sh/e024fc17-7e59-42a0-b271-5c72cd95da24/f0b19a8ecd14e529d9a9e7485bf0d387

Current quick css:

.phone-info {
font-size: 14px;
}
#footer h3 {
color: black !important;
}
.phone-info {
padding-top: 62px;
margin-left: -30px;
}
.sub_menu { right: 12%; }
#top .social_bookmarks li { font-size: 19px; }
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: #c3512f!important; }
.main_menu ul:first-child > li > a:hover { color: orange!important; }

.avia-menu-fx { display: none; }
#header_main_alternate, .bottom_nav_header.social_header .main_menu ul:first-child {
background: #494949;
}
.bottom_nav_header.social_header .main_menu ul:first-child>li a {
font-size: 16px; font-weight: 700; font-family:'Lato';
}
.bottom_nav_header.social_header .main_menu ul:first-child > li a {
color: white;
}
#header_main_alternate .container, .main_menu ul:first-child > li > a {
height: 55px  !important;
line-height: 55px  !important;
}
.bottom_nav_header.social_header .main_menu ul:first-child>li a {
border-right-style: none!important; } 
.bottom_nav_header.social_header .main_menu ul:first-child>li:first-child a {
border-left-style: none!important; }
body {
font-size: 14px;
}
#top .social_bookmarks li a {
color: #c3512f;
}

Thanks a lot, this support team is the best.