Custom CSS for all devices / different layout on smaller screens

Support
#1

Hello,

I have used some additional CSS to adapt my design which worked fine.

In particular:

To add a background post color I’ve used:

body .format-standard .entry-wrap {
background:#e3e4e5 !important;
}

To remove the page title I’ve used:

.x-header-landmark {
display: none;
}

AND

To remove the mobile button shadow I’ve used:

.x-btn-navbar.collapsed, .x-btn-navbar.collapsed:hover {
-webkit-box-shadow: none;
box-shadow: none;
}

However, my problem is that , if I’m selecting to another device in the costumiser, e.g. phone. the code above won’t ‘work’ anymore.

Is there any piece of code I can add to make my layout the same throughout all devices?

Looking forward to any help :slight_smile:

#2

Hello there,

Please provide us your URL so that we can check that properly.

Best regards.

#3

Hi there,

thanks so much! :slight_smile:

My URL is pawsent.de

#4

Hi there,

I just checked in mobile and your CSS works, would you mind providing a screenshot of what you’re seeing and what should we expect to see?

Thanks!

#5

Hi, and thanks for your help.

I’ve added 3 screen shots.
This first one was taken with my ipad.

  • The social icons bar is dark blue. I would like it to look like on the next screen shot.
  • The mobile-navbar button doesn’t have a shade, that perfect - however there is a shade on the last screen shot.

This second screen shot was taken full screen and shows how I want it to look like on all devices.

This last screenshot was taken while choosing a smaller screen inside the costumizer.
In contrast to the the full screen.

  • The PAGE TITLE is now showing up
  • Theres a MOBILE-NAVBAR-BUTTON-SHADE
  • There’s A LINE underneath the navbar (which I actually quiete like, but I’d prefer it to apear either in all or no screens)
  • The RECENT POSTS CONTENT-BACKGROUND-COLOUR is white and not grey (BTW. is there a way I can make the recent posts design look exactly like the blog design (no frame, background colour: grey which I prefer ??)

#6

Hi there,

Have you cleared your browser’s cache? You’re customizing your site but your site has active cache, cache is only recommended in production mode when you’re done developing your site. Cache is against change, and you’ll not see the change you applied in real time.

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.w3-edge.com/products/


Served from: pawsent.de @ 2018-01-07 12:58:05 by W3 Total Cache
-->

  1. I don’t see dark blue background in the social icons, it’s all white

  2. There is no shade or box shadow on my end either if it’s in customizer only, then please clear your browser cache and provide your login credentials. You can also check it in X > Launch > Theme Options instead of customizer

  3. There is no title from my end, it could be due to cache

  4. There is no mobile shade on my end too

  5. Those lines are part of the landmark which you hide through CSS, and it’s not displaying on both desktop and mobile on my end.

  6. The recent posts background is grey on my view, but I see that the posts being displayed from your screenshots are different from what I’m seeing. This could be due to cache for logged in users and non-logged in users.

Before we further continue, please provide the login credentials and make sure all cache is disabled.

Thanks!

#7

Thanks!
I have added the credentials above.

#8

Hi there,

I recommend disabling the cache while you’re developing your site. I went ahead and disabled it, don’t activate it if you’re not yet finished developing your site.

I can confirm the issue in customizer and it’s because your CSS isn’t being loaded. Please add it under Custom > Global CSS instead of Zusätzliches CSS. But I again, I can only see that issue in customizer, it all works as expected on the mobile device.

Thanks.

#9

Hi and thanks again,

I have done that. The background-content color themes fine, and I guess I’ll work out the lines later, as it looks fine outside costumizer.

May I ask you one last question regarding the mobile nav bar button?
Could you check out my website on a normal - not mobile - screen outside customizer and then decrease the browser window size.
The mobile nav bar button will appear. Once you click on it, there’ll be a grey shade. Can you see that and if so, do you know how to remove it?

Thanks again!

#10

Hi,

To remove it, you can add the code below in Theme Options > CSS

.x-btn-navbar {
    box-shadow:none;
}

Hope that helps

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.