my logo is not responsive on mobile phones.
Code below. Wordpress theme: xclean.
Can anyone help please?
Thank you.
/*=============================================
= Mobail Menu Style =
=============================================*/
.header-search {
right: 0;
}
.header-search .searchform input[type="text"] {
width: 160px !important;
}
.header-search .searchform input[type="submit"] {
width: 35px !important;
}
.header .site-logo a {
display: block;
text-align: center;
}
.header .site-logo .slideItWrapper {
display: inline-block;
}
.header-cart:hover .dropdown {
visibility: hidden;
opacity: 0;
}
.header-cart .dropdown {
display: none;
}
Use Relative units of measure:
.header .site-logo a {
width: 10vw;
}
Related
Can someone help me how can I move my footer to the bottom using position: relative?
FOOTER PROBLEM PHOTO
#page-footer {
.list-inline {
display: none;
}
}
.s-footer {
background-color: $primary;
margin-top: auto!important;
padding: 0px !important;
border-top: 1px solid $primary;
font-size: 0.875rem;
color: $default;
.tool_dataprivacy {
display: none;
}
.helplink {
display: none;
}
}
.c-container {
width: 100%;
text-align: center !important;
}
This is the code from the theme, i haven't made any changes from that code. Thank you!
You need to set min-height to container
.c-container {
width: 100%;
text-align: center !important;
min-height: 80vh; //adjust this accordingly
}
Or make the footer fixed
.s-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
I'm trying to fix a bug in a video carousel. The next and previous arrow controls extend from the top to the bottom. The problem is they cover the controls for the video players themselves.
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 15%;
flex-basis: 20%;
color: #fff;
text-align: center;
opacity: 0.5;
transition: opacity 0.15s ease; }
#media (prefers-reduced-motion: reduce) {
.carousel-control-prev,
.carousel-control-next {
transition: none; } }
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: 0.9; }
.carousel-control-prev {
left: 0; }
.carousel-control-next {
right: 0; }
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: 20px;
height: 20px;
background: no-repeat 50% / 50% 50%; }
This is in the additional css section:
.wpforms-field-container textarea {
resize:none;
}
.site-info a {
color:#555;
}
#media screen and (max-width: 991px) {
.slick-track {
max-height: calc(100vw / 2);
}
.slick-arrow {
width: 50% !important;
}
.carousel-control-prev {
justify-content:flex-start !important;
}
.carousel-control-next {
justify-content:flex-end !important;
}
.slick-arrow img {
height: 35px !important;
max-width: none;
}
}
Here's a link to the slider in action:
http://jamesautery.com/projects/music-videos/
I'm new at this so let me know if I left out any key information.
When scrolling the page, the TextField on the page is visible on header area. The header is created with css and I am using TextField from material-ui.
I have never created an header with css before. Is there maybe some code that has to be included, when creating an header? see code below.
Any help is appreciated! Thanks in advance.
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #02ABED;
height: 56px;
}
.toolbar__navigation {
display: flex;
height: 100%;
align-items: center;
padding: 0 1rem;
}
.toolbar__logo a {
color: white;
text-decoration: none;
font-size: 1.5rem;
}
.spacer {
flex: 1;
}
.toolbar_navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li {
padding: 0 0.5rem;
}
.toolbar_navigation-items a {
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active {
color: black;
}
If anyone has the same problem, I fixed this by setting the z-index, see code below:
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #02ABED;
height: 56px;
z-index: 1;
}
Is there something wrong with my styles or media query? When im in my phone i lose the ability to scroll down. here is my only media query
#media (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
}
Try this
#media screen and (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
I fixed it, it was the skrollr declaration on my script it was my own mistake thankyou for all the help i think the skrollr.js has issue with mobile.
I do not know css and it seems hard to display a menu through my self-hosted wordpress site theme in the mobile version. The idea is to use the following code:
#sidebar-primary { display: none; }
Though seems that nothing happens when I add it. Is there a way to hide this element? Below is th whole code when the mobile version is present. Thanks
#media only screen and (max-width: 767px) {
.wrap { max-width: 300px; }
#branding {
float: left;
width: 100%;
position: relative;
}
#sidebar-header {
width: 100%;
margin-bottom: 10px;
}
.featured-wrapper, .aside, .content-wrap, #content, #sidebar-subsidiary .widget, #respond { width: 100%; }
.featured-post h2.entry-title a {
font-size: 12px;
line-height: 1.4em;
padding-right: 15px;
bottom: 87px;
}
.featured-post .byline {
bottom: 63px;
padding: .25em 15px .25em 1.3em;
}
.home.singular .byline { font-size: 10px; }
.menu-toggle {
display: block;
width: 100%;
}
#menu-primary {
float: left;
clear: both;
width: 100%;
margin-top: 10px;
}
#menu-primary .menu, .menu ul {
float: left;
width: 100%;
}
#menu-primary ul li {
clear: left;
display: block;
padding-left: 0;
background: none;
}
#menu-primary ul li a {
font-size: 20px;
margin-left: 0;
padding: 12px 15px;
}
#menu-primary li li a { font-size: 18px; }
#menu-primary li ul, #menu-primary li li { border: none !important; }
#menu-primary li li a:hover { background: none; }
#menu-primary ul li ul {
display: block !important;
float: left !important;
visibility: visible !important;
}
#menu-primary li ul {
display: block !important;
position: relative !important;
top: 0;
left: 30px;
}
#menu-primary ul li li ul { left: 30px !important; }
#menu-primary li:hover ul, #menu-primary li.sfHover ul {
display: block !important;
top: 0 !important;
}
#menu-primary li:first-child ul { left: 0; }
#menu-primary .sf-sub-indicator { background: none !important; }
#menu-secondary .sf-sub-indicator { background: none !important; }
.hentry {
width: 100%;
margin-right: 0;
}
.page-template-front .hentry:hover .read-more, .archive .hentry:hover .read-more, .search .hentry:hover .read-more { display: none; }
.page-template-front .hfeed-more .hentry {
float: left;
width: 100%;
margin-right: 0;
}
.comment-list li li { padding-left: 0; }
#sidebar-primary, #sidebar-secondary, #sidebar-subsidiary {
width: 100%;
clear: left;
}
#footer-content, #menu-subsidiary {
width: 100%;
margin-bottom: 20px;
}
#menu-subsidiary .menu { float: left; }
#menu-subsidiary li {
background: none;
float: none;
padding-left: 0;
margin-bottom: .4em;
}
#menu-subsidiary li a {
font-size: 10px;
line-height: 2.5em;
}
textarea { width: 96%; }
}
If it is not working then it looks like the style for mobile devices are defined in different #media query
Mostly max-width : 320px #media query is used for mobile devices
For mobile devices max-width : 320px just check if it is there and add styles in that query
#media only screen
and (max-width : 320px) {
/* Styles */
}
and more information on #media queries can be found here and here
Did you try adding !important to your style?
#sidebar-primary { display: none; !important}
Are you sure that you have not missed any other
#media only screen and (max-width: xyz px)
May be
#media only screen and (max-width: 767px)
style are not calling.
Check with other #media tag if exists in css.
The right way to force the element to not be displayed is to use the css below:
#sidebar-primary { display: none !important;}
semi-colon after !important
Even if you set the display to none it will still appear when you inspect the dom element. To remove it entirely you need to use jquery or javascript the triggers on document ready that removes the element.
$(document).ready(function(){
if($(window).width() < 767){
$('#sidebar-primary').remove();
}
})
Hope this helps