Top Widgetized & Codeless Slider On Responsive version

- 9 years, 3 months ago impact-ad
 Participant
 
 Expired
 
 I need the widgetized area to stay present in the mobile versions. Right now, it and the code less slider are being removed, by media queries I assume.
- 9 years, 3 months ago impact-ad
 Participant
 
 Expired
 
 I also need to find a way to switch between logos from mobile to desktop. Right now, the logo ends up too big and doesn’t align correctly.I see others have posted about it before, but never saw a final response.
- 9 years, 3 months ago Ruco
 Keymaster
 Hello,
 
 Please add this code at custom css code box at general options
 
 @media (max-width: 979px) { #logo img { height: 75px; margin-top: -36px; } }
 
 for the logo display on responsive.
 
 I can see the top nav. area on responsive. You have used a third party plugin to add the widgets there. You can fix it with some custom css code ( it’s not included in theme support ).
 
 Best regards!
 
 This reply was modified 9 years, 3 months ago by Ruco.
- 9 years, 3 months ago impact-ad
 Participant
 
 Expired
 
 What exactly is this code for? I don’t know that it did anything…
 
 I need to literally switch the logo from a horizontal version to a more vertical version for iPad portrait and below. Once we show the responsive menu I want to change the logo.
 
 The top widgetized area and codeless slider are still not showing… I’ve attached screenshots
 
 Mobile portrait version WITH NO Top Widgetized area or codeless slider. You can also see why I want to change the logo too.
 
 mobile landscape version WITH NO top widgetized area, or codeless slider. It also has that weird white bar all the way down the right side. how do I get rid of that?
 
 Regular desktop version where everything is displaying correctly…
 
 Widgets to show you there are no third party plugins in this section…
 
 iPad landscape WITH top widgetized area and codeless slider showing. The logo is ok here.
 
 iPad portrait… Need to change the logo here so its more vertical so it fits in there. top widgetized and code less slider are working correctly
 
 iPad vertical with the logo the way I’d like it to be, see I want to switch the very horizontal logo for a vertical version. I want this logo to display from this screen size and smaller.
- 9 years, 3 months ago impact-ad
 Participant
 
 Expired
 
 can you please help?
- 9 years, 3 months ago Mirela
 Participant
 Hello,
 
 -The code provided is for the logo display on responsive.
 1- The different logo for mobile:
 Sorry but this is not possible from the admin panel. But there is a workaround via css code. Add these lines into your custom css box:
 
 @media (max-width: 767px){ #logo img.dark { content: url("https://impactwebtesting.com/WMWA/wp-content/uploads/2015/07/WMWALogo1.png"); }}
 
 change the image url, to the one you want to use as logo for the mobile version.
 
 2-The top widgetized area is not designed to display in mobile/iPad too.
 To make it show, add these line sinto your custom css box:
 
 @media (max-width: 767px){ .top_nav { display: block;} }
 
 Best regards!
- 9 years, 3 months ago impact-ad
 Participant
 
 Expired
 
 updated the theme and now have major problems… Nothing loads, this is my error!!! please help ASAP
 
 Fatal error: Call to undefined function vc_map_get_attributes() in /home/impa272/public_html/impactwebtesting.com/WMWA/wp-content/themes/specular/vc_templates/vc_row.php on line 29
- 9 years, 3 months ago impact-ad
 Participant
 
 Expired
 
 OK fixed the error by reinstalling Visual Composer like you said in another post as an option, it worked. I was also also able to get the logo to switch. Thanks for your help.
 
 I’m still having an issue with the logo being too far to the right on a phone. Only displays half the logo. I did get it to work perfectly on all other devices. How do I fix the logo just on the phone?
- 9 years, 3 months ago Mirela
 Participant
 Hello,
 
 Add this code into your custom css box:
 
 @media (max-width: 480px){ #logo { left: -69px !important;} }
 
 Best regards!
- 9 years, 3 months ago impact-ad
 Participant
 
 Expired
 
 That didn’t work, I even increased the amount and it didn’t move.
- 9 years, 3 months ago Mirela
 Participant
 Hello,
 
 Sorry for the late reply.
 I edited the code to this:
 
 @media (max-width: 480px){ #logo img {left: -75px !important;} }
 
 It’s ok now. Please check your site.
 
 Best regards!
- 9 years, 2 months ago impact-ad
 Participant
 
 Expired
 
 I tried it and it still did not solve the problem. I am looking at an iPhone 4 in portrait mode. The logo is off the screen half way along the right side. Here is a screen grab so you can see it
- 9 years, 2 months ago Mirela
 Participant
 Hello,
 
 I already changed this before.. Did you made any other changes to it? However, please add these lines into your custom css box:
 
 @media (max-width: 480px){ #logo { left: -75px !important;} }
 
 This is the result.
 
 Best regards!
- 9 years, 2 months ago impact-ad
 Participant
 
 Expired
 
 I put that in there, and it still didn’t do anything. It is displaying like that on iPhone 5 and an android phone. I didn’t change anything. I tried increasing the – value even to make it come over more and it’s just not moving.
- 9 years, 2 months ago impact-ad
 Participant
 
 Expired
 
 I found it, there was another left 0 important in the bootstrap css file, I removed it and now its pulling the one from custom CSS… thanks