-
Posts
-
Hi Guy’s,
Seem to be having some really strange layout issues lately with my site. https://collinssafety.ca
I noticed despite having the back-end configured properly, the page content is now condensed (or pushed) all toward the middle of the page. Huge padding is noticed on both right and left sides. This is as well evident with the Logo and menu at the top too.
I’ve always kept everything up-to-date so not sure how long this has been going on. I did try and deactivate ALL plugins to see if that any effect or made a difference… but nothing changed. Please let me know what I could try to fix this or advise if you need to login to look at it. It looks terrible right now and I can only conclude it has something to do with the theme.
Thanks for your help!
JoeHi Joe,
I’m not sure how your site used to look like, but you can change the container size under Enfold->General Layout->Dimensions. If you should need any further help then please include admin login details in private with your next reply.
Best regards,
RikardHi Rikard,
I checked that area and it all seems fine. In addition to what I was trying to communicate before about the layout, I have screenshots prepared to show you to try and explain what the difference is but I can’t see how to attach them here?? So use the link below download them.
Again, everything looks pushed toward the center leaving a huge space on each side. if you look at the Avia Builder of the home page you see I have everything set up to use the entire width as much as possible. However, it’s not showing this on the front end.
It never looked like this before. Everything was spread out utilizing the whole screen width (as it should). The Logo and Menu are even now tightly close together in the center. The Log was always situated on the far left before. Over the years, you guys have provided Quick CSS code to use when adjusting the layout in the beginning so I don’t if this has anything to do with it vs the all the updates moving forward.
Anyway, I hope this and the attached screenshots helps explain it a bit better. Please use the “TEMP LOGIN” link below to login and check it out.
Let me know if you need anything else.Thanks a lot for your help!
JoeHi Rikard,
Have you had a chance to look at this since my last reply? Please advise. I have you set to login using the link provided.
Kind of desperate to get this fixed.
I appreciate your help!!Joe
Disregard last.
I found the issue. It was the old Quick CSS code you guys provided back in the day. All of a sudden it didn’t want to work with all the new updated features I guess*************Removed*****************************
‘#top .iconlist_icon {
background: #490;
border-color: #480;}‘#top .iconbox_icon {
color: #00aa44;}‘#top .av_font_icon a{color: inherit;}
.iconbox.iconbox_left .iconbox_icon {
color: #999;}************Removed*****************************
Ok, now I after taking out that code that seemed to fix the layout issue.. I can’t the background of the second line in the caption title to shorten like the rest.
See screenshot: Image #6. I just want to shorten the text background on the second line “We’ll take the pressure off…” like the rest.
Here’s the code I currently have in my Quick CSS. If you have any ideas to clean this code up as well or perhaps delete anything that’s no longer needed… please let me know. Again, Thank you for any help you can provide!!
Cheers,
Joe************Quick CSS***********************************
#top .logo {
padding-top: 5px;
}.caption_framed .slideshow_caption .avia-caption-title {
background: rgba(0,0,0,.8);
font-size: 45px !important;
}#top .avia-icon-list .iconlist_icon {
background-color: #333333;}
.main_menu ul:first-child > li > a{ font-size:13.5px; }#top {
font-size: 13.5px;}*************Removed*****************************
‘#top .iconlist_icon {
background: #490;
border-color: #480;}‘#top .iconbox_icon {
color: #00aa44;}‘#top .av_font_icon a{color: inherit;}
.iconbox.iconbox_left .iconbox_icon {
color: #999;}************Removed*****************************
‘#top .iconlist_icon {
border-color: #ff0000;}.tab_titles .tab { font-size: 13px !important; }
#top .tabcontainer .active_tab {
font-size: 13px !important;
background: #222222;
color: #fff;
}.js_active .top_tab .tab {
border-color: #e1e1e1;
background: #fff;
color: #222222;
}.tab.active_tab {
color: white!important;
}#top p.toggler.activeTitle {
background: #555555;
color: #fff;
}.activeTitle span.toggle_icon, .activeTitle .toggle_icon .hor_icon {
border-color: #fff;
}.mejs-offscreen { : none !important; }
.tribe-mini-calendar-grid-wrapper .tribe-mini-calendar td {
: table-cell;
}#fullwidth .container{ max-width: 100% !important; padding: 0 !important; }
#wc-moneris-account-number{
height: 40px !important;
padding: 0 !important;
border: 0 !important;
}body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
font-weight:bold;
font-size: 13.5px!important;
}body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: #990000!important;
}
#top .avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial {
min-height: 420px;
}.page .hatom-extra{
: none;
}.caption_framed .slideshow_caption .avia-caption-content {
background: rgba(0,0,0,.7);
font-size: 20px !important;
}.slideshow_caption { width: 80%; }
.avia-caption-title {
margin-bottom: 10px !important;
}
.avia-caption-content {
: inherit !important;
}Ok, I don’t know what’s going on but just after sending the last message that I found the issue… I logged out of WP and noticed that the site went right back to having the same layout issue. But if I’m logged in to WP and look at… it looks fine?? This is VERY STRANGE!
Something is is wrong somewhere. I really hope you can find out what it is. By the way, images #6, 7, & 8 are what the layout SHOULD look like. No gaps on the right and left side and the Logo is over on the left like it should be.Cheers,
JoeHi,
Thank you for the update.
We can’t reproduce the same layout issues on our end. Are you sure you’re not looking on a cached version of the page? Please check it on incognito mode.
Screenshot: https://imgur.com/a/q2n7EGd
Best regards,
IsmaelHi Ismael,
Thank you for reply and advise. I did try and it again today and seems to have worked this time. Not sure what the issue was.Anyway however, I still need to fix the issue as described in post #1128465. The second line background size. Can you offer some CSS code to fix this?
Cheers,
JoeHey!
Thank you for the update.
Could you give us an actual link to the thread? We won’t be able to find it using that post ID. We went through your previous posts, but this is the only thread that is still open.
Regards,
IsmaelIts the same tread. Just a couple posts back. The one with all the css code…
Screenshot links are included in the Private data section as well.
Hi,
Thank you for the update.
We totally forgot about that. Sorry. You can use this css code to shorten the background.
.caption_framed .slideshow_caption .avia-caption-content { display: table-cell; }Best regards,
Ismael
- You must be logged in to reply to this topic.