problems with media queries on my website - css

I wrongly edited some code in css media queries a time ago and now on mobile devices the logo of my website look like this:
.
The url of my page is: SplashYourCash.com
I cant get it to back to fill out the right space, maybe someone of you has an idea?
much greetings,
herrsocke

If you add the following CSS to your mobile media-query:
.navbar-toggle {
margin-right: 0;
}
It should fix it.

Try this at the bottom of your style.css file
#media all and (max-width: 380px) {
.logo {
height: 62px;
}
.logo.logoshrink {
height: 50px;
}
.navbar-toggle{
margin-top:27px;
margin-right:0;
}
.navbar-toggle.mt8{
margin-top:8px;
}
}

Related

How can I move the Shop Page Title to the left? (Woocommerce+Custom theme{minimog theme})

I’ve tried everything and it just won’t work.
This was my last attempt.. but it didn't move a pixel
#media screen and (min-width: 769px) {
.shop #fullscreen-header .featured-slide .entry-title {
float: left;
margin-left: 150px;
}
}
Could someone please, help me with that?
Our shop page using minimog is posher.com.br/shop
Thank you in advance!
You could use flex.
.heading {
display: flex;
}
This is how it looks on my side.

I have a problem getting my sidebar responsive

I created this sidebar with reactjs and with a certain fixed number of px for each element this caused the sidebar to not be reponsive. Unfortunately I'm not that good at CSS. Can someone help me transform this code to reponsive please ?
thanks in advance :)
code is here
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
code
Use max-width in your sidebar.css instead of max-height.
#media screen and (max-width: 600px) {
.sidenav {
padding-top: 15px;
width: 100px;
}
.sidenav a {
font-size: 14px;
}
}

Mobile Page not showing up - Joomla

Hi I am looking for some help in regards to understanding why the following page does not show up on a mobile size screen (480px) as all the other pages that have been built show up fine.
http://leicesterbakery.co.uk/index.php/product
I have a module class suffix with the following styles within the media queries in order to control what is shown on a mobile and what is shown a desktop.
(media query with max-width: 480px)
.range_full {
display: none;
}
.range_resp {
display: block;
}
Normal CSS file
.range_full {
display: block;
}
.range_resp {
display: none;
}
Would appreciate it if somebody could advise as really cant work out this isnt showing up.
You have a display: none on .range_full
Change it to block and it will show:
#media (max-width: 480px) {
/***** BASIC LAYOUT *****/
.range_full {
display: block;
}
.range_resp {
display:block;
}
.fullrange_full {
display:none;
}

How to center align element in mobile version?

I tried to modify some element with the following text "Connect with Deepak" in my page but without little luck. Please help me to edit the CSS:
#media (max-width:560px) {
.vc_sep_holder .vc_sep_holder_l {
max-width: 320px;
margin:auto;
}}
#media (max-width:560px) {
.vc_sep_holder .vc_sep_holder_r {
max-width: 320px;
margin:auto;
}}
The two line always appear in mobile. Can someone provide advice to where I make mistake?
add this in your media query: .vc_separator.vc_sep_double {width:100%;}
This solved my issue. Thanks to everyone !
#media (max-width:560px) {
.vc_separator.vc_sep_double {width:100%;}
}
I would suggest trying margin: 0px auto
Edit:
.vc_separator.vc_sep_double .vc_sep_line {
border-bottom: 0px;
}

Media Query Styles Not Overriding Original Styles

I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?
ORIGINAL CSS
#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 4px 2px -2px gray;
}
MEDIA QUERY CSS
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of #global-wrapper-inner to 100% it doesn't apply. I can see the style being "applied" when I press F12 and select that element. However, the style itself is crossed out and not actually applied and it still has the original width of 85%.
The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.
The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.
To have the first media query selector take precedence, prepend an ancestor element to it:
#media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
You need to link the media query file (queries.css) later than the normal css file (style.css). That way the rules in the queries.css will override those in style.css.
I have been at least 2 hours trying to find the override CSS problem till I found that my line comments where wrong... And the second definition of CSS wasn't working:
So, don't be so stupid as I !:
/* LITTLE SCREENS */
#media screen and (max-width: 990px) {
... whatever ...
}
/* BIG SCREENS */
#media screen and (min-width: 990px) {
... whatever more ...
}
never use: Double bar as I did:
// This is not a comment in CSS!
/* This is a comment in CSS! */
Here is the answer. (at least what worked for me)
I've had this problem before, and it took me a while to realize what I did, but once I figured it out it's actually pretty easy.
Ok so imagine I have this as the html
<main>
<div class = "child1"> </div>
<div class = "child2"> </div>
</main>
and then this as the CSS
main .child1{
height: 50px;
}
/* now let's try to use media quaries */
#media only screen and (max-width: 768px) {
.child1{
width: 75%;
}
}
The code above won't affect the .child. Just like someone mentioned above, the main .child1 overrides .child1. So the way you make it work is to select the element just like we did at the very beginning of the CSS above.
/* this will work */
#media only screen and (max-width: 768px) {
main .child1{
width: 75%;
}
}
So as a conclusion... select the elements the same way every time.
Meaning ... for example in the above code, in your CSS, you should either select it as main .child1throughout the whole CSS or .child1 or else they get mixed up, one ends up overriding the other.
From the code you submitted, this probably won't resolve your issue. However, in your CSS if you are nesting styles inside of one another:
.main-container {
.main {
background: blue;
}
}
A media query for .main won't work because of the nesting. Take .main out of .main-container and then the media query will work as assumed:
.main-container {
}
.main {
background: blue;
}
Check if your media query braces are equal.
Sometimes it is very subtle but when you miss a single brace the rest of the media queries mentioned for certain break points will not work
example:
#media(min-width: 768px) and (max-width: 991px){
#media (max-width: 767px){
.navbar-brand p {
font-size: .6em;
margin-top: 12px;}
.navbar-brand img {height: 20px;}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span {
font-size: 1.2em;}
}
Here you can see i have started the braces for max-width:991px but forgot to end so the next set of codes in media query for max-width:767px will not work.
It is a very simple mistake but took hours because of lot of braces in the codes.
Hope it helps. Happy Coding!
What about using !important? If you range your media query from ( min-width: 176px ) and ( max-width: 736px ) or even up to 980px?
There can be some reasons because of which this type of error may occur.
I myself faced this issue where I was not able to understand what I am needed to do and was confused that, does media query just overrides the elements.
Here's what I understood:
MEDIA QUERY CSS:
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
here you were able to override #global-wrapper-inner > nav i.e., 2nd media query selector, by display: none;
because you never added the display line in the original css, because of which there was nothing to override you just have given that display type should be none.
Whereas just in the 1st media query selector you already had given width:80%;
Basically media query doesn't override as far as I have understood but it take precedence, like already explained by one of them
by which media query comes to work:
https://stackoverflow.com/a/19038303/15394464
also if still did not get your doubt clear, https://www.youtube.com/watch?v=acqN6atXVAE&t=288s
then this might help.

Resources