change background colour and mobile

Hello @pifvouchers,

I have checked your site and saw that it’s in coming soon mode. Check here.

Can you please make your site accessible so that we can understand the issue and provide you with some solutions?

Thank you.

Please help.
I’ve added a notification bar to the site, but in mobile view it’s too big. I’ve using android.
How do I change the size of the bar and move the chat icon from the left to the right on mobile, can I?

Thanks

Hello @pifvouchers,

Can you please try adding below custom CSS via Dashboard > Appearance > Customize > Additional CSS.

@media only screen and (max-width: 767px) {
    .alertbar {
        overflow-y: scroll !important;
        height: 100px !important;
    }
    .chaty-widget.desktop_active.mobile_active.chaty-widget-is-right {
        right: 15px !important;
        left: auto !important;
    }
}

If you have any further questions, please let us know.

Thank you.

thanks.

How do I move the logo down on the mobile screen?
I want to put a close button on the blue bar please.

https://www.pifgiftvouchers.org/wp-admin/customize.php?url=https%3A%2F%2Fwww.pifgiftvouchers.org%2F

HTML:
<p> <div class=”alertbar”>LATEST NEWS FOR BUSINESSES & ORGANISATIONS: Tracking system is now live. Please register and log all vouchers received to date.</div>
<div class=”yourbox”> <p>
X
</div>

CSS coding:

@media only screen and (max-width:767px) {
   .home .entry-content ul {
       padding: 0;
       margin: 0;
   } 
    .home .site-content .site-main .page {
       padding: 10px;
   }
   .home .site-content .container {
       width: 80%;
   }
}

.alertbar { 
    background-color: #00ffff; 
    color: #00000; 
    display: block; 
    line-height: 25px;
    height: 50px; 
    position: relative; 
    text-align: center; 
    text-decoration: none; 
    top: 0px; 
    width: 100%;
    z-index: 100;
}

.yourbox{
height:100px;
width:400px;
background-color: red;
}

@media only screen and (max-width:767px) {
   .home .entry-content ul {
       padding: 0;
       margin: 0;
   } 
    .home .site-content .site-main .page {
       padding: 10px;
   }
   .home .site-content .container {
       width: 80%;
  }

	{
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  position: relative;
}

	.close {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
}

Hello @pifvouchers,

I am sorry I am not able to understand your question clearly.

Can you please explain the issues with the help of a screenshot? You can use Chrome extension Lightshot to take a screenshot straight from your browser.

Thank you.