Problem with CSS Codes

Hi,
Can you please include a admin login in the private content area so we can take a closer look.

Best regards,
Mike

Hi,
In your css you were missing a ‘ & had extra }
that was throwing off the rest of the codes, so I fixed that and I adjusted your socket code so it would stay center for all devices.
I also removed the duplicate css in your child theme stylesheet, because it would not be needed, and you would need to remember to make the same changes there in the future.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry about disabling the wordfence plugin, it was making it hard to remove the css from your child theme stylesheet, I forgot to turn it back on.
As for the Quick CSS, it looks like there was a couple of errors in the code that slipped by me, I checked again and it should be fine now.
Perhaps instead of using the Quick CSS box, you could move the css to WordPress > Customize > Additional CSS:

as it has a nice automatic error checking feature and you can see your css changes in real time.
I adjusted the font size for the socket, I saw you tried for 25px, but at smaller screens it would be a issue, so I used a media query to only target medium to large screens.

Best regards,
Mike

Hi,
For the social icons and socket font size I added this:

@media only screen and (max-width: 1080px) { 
#socket .social_bookmarks li a {
width: 50px!important; 
line-height: 50px!important; 
min-height: 50px!important; 
font-size: 30px;
}

#socket .social_bookmarks li {
height: 50px!important; 
width: 50px!important; 
}

#socket .social_bookmarks {
    height: 60px!important;
}

#socket .copyright img {
    margin-top: 15px!important; 
}

#socket .container {
    width: 100%!important; 
    max-width: 100% !important;
}
}
@media only screen and (max-width: 422px) { 
#socket {
    font-size: 18px !important; 
}
}
@media only screen and (min-width: 423px) and (max-width: 828px) { 
#socket {
    font-size: 21px !important; 
}
}

For the two mobile font sizes, I made them as large as possible and still keep the socket links in line, if you find the links brake into two lines, just take the font size down one or two px.

For the mobile menu color, I added this:

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
    color: #000 !important; 
}
#top .av-hamburger-inner, #top .av-hamburger-inner:before, #top .av-hamburger-inner:after {
    background-color: #000 !important; 
}

Please adjust to suit.

Best regards,
Mike

Hi,
This is the correct location, the theme merges the css and js dynamically there.
You can check your css code by trying to enter it in WordPress > Customize > Additional CSS.

If this doesn’t help, Please open a new thread so we can assist, we will want communicate in the Private Content area, such as your URL & admin login, but as this is not your thread your info will not be private. Thanks for your patience and understanding.
In your new thread please provide admin login info and detail your issue.

Best regards,
Mike

Hi,
For your tablet (iPad) menu overlapping your logo, typically we suggest to increase the mobile menu brake point.
But I can offer two other options also, the first is to increase the width of the header main container up to 1115px where the menu doesn’t overlap the logo anymore:

@media only screen and (min-width: 767px) and (max-width: 1115px) { 
#top #header_main .container {
    width: 90%!important; 
    padding: 0px !important;
}
}

Please see screenshot 1 in Private Content area.
The second is to drop the menu down below the logo for the same screen sizes:

@media only screen and (min-width: 767px) and (max-width: 1115px) { 
#top .container.av-logo-container .inner-container .main_menu:before {
  content: "\A"; 
  white-space: pre;
}
}

Please see screenshot 2 in Private Content area.
For the blog and single posts, how about increasing the container for better viewing on tablet (iPad)?

@media only screen and (min-width: 767px) and (max-width: 1115px) { 
#top.page-id-875 #main .container,#top.single-post #main .container {
    width: 95%!important; 
    padding: 0px !important;
}
}

Please see screenshot 3 in Private Content area.

Best regards,
Mike

Hi,
To center the icons when using the above code, please add this:

@media only screen and (max-width: 989px) and (min-width: 768px) {
#top.page-id-875 #wrap_all #socket .social_bookmarks,#top.single-post #wrap_all #socket .social_bookmarks {
    width: 100% !important;
}
}

This and the code above works on all single posts & the blog page, note the “.page-id-875” above, that is your blog page. So if you want to target another page, simply copy the code and replace the page ID :)

Is there anything else we can assist with on this issue?

Best regards,
Mike

Hi,
Sorry, I’m not sure I understand what is wrong with the archive pages, such as the one in the Private Content area.
Please advise.

Best regards,
Mike

Hi,
I see you have used the function for changing the category to “blog-grid” But there are a couple of other choices you can use, one is “single-big” which I believe the one you want:

add_filter('avf_blog_style','avia_change_category_blog_layout', 10, 2); 
function avia_change_category_blog_layout($layout, $context){
if($context == 'archive') $layout = 'single-big';
return $layout;
}

Please give this one a try.

Best regards,
Mike

Hi,
That could explain it, is there anything else we can assist with today?

Best regards,
Mike

Hi,
The category page I looked at is in the Private Content area, it looks like a different layout, but using this css fixes the tablet view. The mobile view seemed to have no issues.

@media only screen and (min-width: 767px) and (max-width: 999px) { 
#top.archive.category #main .container {
margin: 0px !important;
width: 100% !important;
}
}

Please see screenshot in Private Content area.
Hope this helps.

Best regards,
Mike