I have a link on this page which isn't working in desktop view but works on mobile. Is there some kind of responsive issue which would stop it working?
I applied css:
a:hover[href="https://
adsler.co.uk"] {color:red
!important;}
a:active[href="https://
adsler.co.uk"] {color:red}
The html is:
<div class="designn"><a
href="https://adsler.co.uk">
design</a></div>
The class "e" have z-index of 3 , which is stopping the link from clicking it. To fix this give z-index:4 to class "designn"
.designn {
color: black;
font-size: 16px;
position: relative;
bottom: 350px;
left: 38px;
font-weight: bolder;
z-index: 4; /* added newly */
}
From what I can see, the red e is above the design link due to z-index being 3 when device width is 768px or more. A quick solution would be adding a z-index value higher than 3 in designn.
u covered it using z-index:3 on e-letter
#media (min-width: 768px) .e { z-index: 3; }
u can use z-index: -1 for example and u will have access to
Related
Lets you say you have two media queries on an element that both match. How do you know which one wins?
For example, let's say you have a media query that sets a rectangle to be red at LESS than or equal to 500 pixels and you a media query that makes it blue at MORE than or EQUAL to 500 pixels. Which one wins? And let's say you have a phone that is 500 pixels wide.
hr {
width: 400px;
left: 10px;
top: 0;
position: absolute;
}
.rect {
left: 10px;
position: absolute;
top: 20px;
right: 10px;
}
#media (max-width: 400px) {
.rect {
background-color: lightgray;
}
}
/* larger content */
#media (min-width: 400px) {
.rect {
background-color: lightblue;
}
}
<div class="rect">
Here is a div
</div>
<hr width="500px">
I would like to setup proper media break points. Do I need to rewrite them? Should they be min-width 501px and so on?
Normally it's the style declaration that comes last in the code that "wins" (is applied!). You can set !important on a style declaration, but IMHO that is toss-up and sometimes doesn't work. I 'think' id styles will have more importance over class styles, but I do know you can set multiple class name styles more influential.
Code not tested:
#less_important {
background : green;
width : 50px;
height : 50px;
}
.blue {
background : blue;
width : 50px;
height : 50px;
}
.red {
background : red;
border : 1px solid yellow;
}
<html>
<div id = "less_important" class = "blue">
</div>
<div class = "blue red">
</div>
<div class = "red blue">
</div>
</html>
Move the style .red and .blue in the code and see what happens to understand
CSS mean Cascading Style Sheets.
Definition of cascade:
"Something arranged or occurring in a series or in a succession of stages so that each stage derives from or acts upon the product of the preceding."
So, whatever comes after in the cascade will overwrite the previous.
Yes, you should set the one with min-width to 401.
I'm working on making a Squarespace page with custom CSS to be mobile responsive. In a mobile screen, my page has a drop down menu with the different links for the page. My problem is that in certain pages (such as Music or Watch) when you click on the menu button, the drop down menu hides behind the content of the page. I know this has to do with using position: absolute, but i have not found a way to have the placement of the menu button and drop down list as I want it by using position: relative. This is my CSS for the menu:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
}
#mobileNav .wrapper {
border-bottom-style: none;
border-bottom-color: none;
}
You can view the page at richiequake.com using the password Help123. Is there another way I can have the placement of the menu button and the drop down list and have the list "push" the content of the page down so the link list is visible?
Basically, are you are missing is the z-index property. Which will place the container #mobileNav in a higher layer.
By making this change (adding z-index property to your CSS selector):
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
I can now see the menu links in all pages. You can read more about the z-index spec here.
UPDATE - To also push the content down while using absolute positioning:
As you are already using a custom class to toggle the menu links, you can use that to also toggle the content section.
Add a selector rule as following to your stylesheet:
.menu-open~section#page {
transform: translateY(355px);
}
What this will do is, when the menu-open class is in the document, the sibling section with id of page, will be pushed down 355px.
You can also add a some kind of animation if you want a smoother effect on pushing the content down, like so:
#page {
margin-top: 100px;
margin-bottom: 100px;
opacity: 1;
position: relative;
transition: transform .3s linear;
}
I just added the transition, where the .3s is the time that the transition will take.
One problem with using absolute positioning, even if you use transforms to compensate for it, is that on some devices and browser widths, the logo will overlap the navigation. Observe what the current solution renders:
Another problem is the delay between when the navigation collapses and when the text is no longer visible:
Because this is Squarespace and you don't have access to edit the underlying DOM, I would use flexbox to solve this. To do that, first get rid of this:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
And add this:
#media only screen and (max-width: 640px) {
#canvas {
display: flex;
flex-direction: column;
}
#mobileMenuLink {
order: 1;
}
#mobileNav {
order: 2;
}
#header {
order: 3;
}
#header ~ * {
order: 4;
}
}
Note that the above is not vendor-prefixed, so if you want to support older browsers, you'd correspondingly want to add vendor prefixing.
I've made a mediaquery and, strangely, some of the new css properties work and other don't...
working : .ctas and .footer-content
When I use the chrome inspector, I doesn't even detects the mediaquery for the classes not working...
You can see the page I'm working on here : http://sopureinthecity.fr/test/
#media screen and (max-width:570px) {
.ctas {
width: 270px;
}
.footer-content {
padding-top: 20px;
}
.img-reponsive {
margin-top: 40px;
}
.main-title {
top: 30%;
width: 100%;
font-size: 18px;
}
.modal-btn {
top: 48%;
}
}
What did I do wrong ?
Thanks in advance !
EDIT, so everything works in the browser, but my .large-header is all bugged when I visit the website on my phone !
The responsive of the .large-header only works on the desktop (with a phone screen size)
You have typos in your css selectors when compared to the site you have linked:
.img-reponsive vs .img-responsive
.modal-btn vs .modalbtn
Nothing is wrong with the media query. The issue is a typo:
.modal-btn {
should be
.modalbtn {
As the CSS class used in your page is modalbtn.
In my application, I have a left sidebar which I want to hide when the user prints the page.
I am using the following media query :
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin: 0 !important;
}
}
i am hiding the sidebar, that works, but canceling the left margin on the wrapper does not work.
It works when I display the inspector and activate the emulation for css print with chrome and opera, it does not work if i press ctrl+P.
Do you have an idea of what I could do ?
I assume that the original css rule you have set is "margin-left: 50px" as an example of 50px. Try the same way in your media query like this "margin-left: 0". I think it worked for in the past. Might not be the best solution but it will probably get you going.
CSS
#page-wrapper {
margin-left: 50px; /* as an example */
}
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin-left: 0; /** try without !important, if doesn't work, then add it back.**/
}
I Hope that helps.
I'm trying to build a responsive HTML email. I'm attempting to do something fairly simple but getting stuck and am starting to be convinced that I may need to approach it in a different way.
I want to show certain content if the user is on a mobile device, and hide it otherwise.
My first attempt looked like:
The CSS in the head:
#media (max-width: 420px) and (min-width: 100px) {
.mobile {
display:block !important;
}
}
The HTML:
<div class='mobile' style='display:none;'>
I'm only visible on mobile :)
</div>
This works beautifully for most mail clients but not with Gmail which does not support 'display:none' without an '!important'. But, adding the !important to the inline styles means that it will not display for mobile.
I've tried a few different things including messing with visibility/opacity (figured that would be a start in the right direction, but that didn't work at all) and trying to sneak around inline styles by attempting:
The CSS in the head:
.mobile {
display: none !important;
}
#media (max-width: 420px) and (min-width: 100px) {
#fix .mobile {
display:block !important;
}
}
The HTML:
<div id='fix'>
<div class='mobile' style='display:none;'>
I'm only visible on mobile :)
</div>
</div>
But that didn't work either. Seems like it would be a pretty common problem.
Any ideas how to get around this?
Ah the beauty of software development: we get to just keep trying until things work! Found a fix. It seems like there is more than one way to get around Gmail's display: none (!important on the inline style is not the only way). Here's what worked for me:
The CSS in the head:
.mobile {
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
padding: 0;
}
#media (max-width: 420px) and (min-width: 100px) {
.mobile {
display:block !important;
line-height: 1.5 !important;
max-height: none !important;
}
}
The HTML:
<div class='mobile' style='display:none;font-size: 0; max-height: 0; line-height: 0; padding: 0;'>
I'm only visible on mobile :)
</div>
How about using:
<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>