I have a slick-menu, a logo, and a search element in my top bar. Unfortunately, I cannot figure out how to make them all clickable at the same time within both my tablet and mobile responsive. Because of a z-index, I think they are stacked/transparent--which is the issue. I can only either make the menu + search clickable or the logo. I've tried changing them to inline-block on each element, tried the pointer-events property, and also changing around the z-index values, but nothing has been successful. How do I fix this?
You can view my website here: www.rachelclayton.co
CSS:
#media only screen and (max-width: 767px) {
#top-bar-logo {
text-align: center;
position: absolute;
}}
#media only screen and (max-width: 941px) {
#top-bar-logo {
display: block;
}
#top-bar-logo img {
max-width:60%;
height:auto;
}
#mobile-social {
display: none;
}
#top-bar {
height:40px;
position:relative;
line-height:40px;
background:#ffff;
z-index:99999;
}}
#media only screen and (max-width: 490px) {
#header {
padding-top: 10px;
padding-bottom: 10px;
}
#top-bar {
height:35px;
position:relative;
line-height:35px;
background:#ffff;
z-index:99999;
}
#top-bar-logo img {
max-width:70%;
height:auto;
}
#top-bar-logo {
display: inline-block;
}}
I'm having a hard time understanding this post.
Specifically what does this mean "When I shift it up to the top bar, it becomes un-clickable."? What is "it" as in "shift it up"?
I see in your site you wrapped the <img> with <a> - that is good.
<img src="https://rachelclayton.co/wp-content/uploads/2019/05/RClogo.png" alt="Rachel Clayton" />
Have you tried wrapping the <div id="top-bar-logo"> in the <a> tag as well?
Related
I feel like I'm about to feel very silly in a second, but I can't for the life of me figure out what's wrong with my media query. I'm using Adobe's Brackets as my code editor, and originally thought there was a glitch in the program. But then I tested the code in jsFiddle and it's not working there either, so I must be fudging something up with the code.
Can anyone see what's wrong?
Here is my jsFiddle
HTML
<div class="helpful">
<span class="thumb">Did you find this helpful?</span>
<span class="readers">82 Readers found this helpful</span>
</div>
CSS
.helpful .readers {
color: #35cb1a;
font-size: .9em;
}
.helpful .thumb {
float: right;
color: #7b7b7b;
font-size: .9em;
}
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
}
}
display: block; margin: auto on elements with no specified width has no effect, since blocks with auto width stretch to the full width of their container leaving no room for margins.
Furthermore, auto margins have no effect on a floated element, and a floated element is display: block by definition.
So your media query is working, but the styles in it don't have any apparent effect on the given layout.
If you want the floated element to stop floating at 1020px and narrower, you need to override the float declaration.
If you want the text to be centered, use text-align: center instead of margin: auto.
If you want the two elements to stack vertically, keep the display: block declaration.
Putting it all together:
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
text-align: center;
}
.helpful .thumb {
float: none;
}
}
you code is perfectly fine as you want to centre align those div after some 1020px width and for that you have use this css
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
}
}
But you always need to mention width if you are using margin:auto.
I am assuming width of 200px so css should be like this
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
widht:200px;
}
}
Working fine in this fiddle https://jsfiddle.net/vgrtety9/3/
JS FIDDLE
This is my page, when you make the browser width less than 960 px
The first gird box will be diappeared on Firefox,
But it still shows on Chrome.
How to make it has the same behavior on both Chrome and Firefox
Css
.container {
.categorysection {
margin: 0 auto;
max-width:960px;
&.grey {
background: #eee;
}
}
.grid-col {
text-align: center;
display: block;
float: left;
margin: 8px 6px;
}
}
#media screen and (max-width: 960px) {
.grid-col {
float: none !important;
}
}
The problem is that page title that says "finance". That title is floating left, and pushing the first block off screen.
You can either remove the floating from it, or clear the floating flow from the columns:
#media screen and (max-width: 960px) {
.grid-col {
float: none !important;
clear: both;
}
}
Looks like the float:left on the header (.container h3.heading) is breaking it. Remove it and it will work but you'll have to add a "row" class on the h3.
i've designed a page with a div and two child div, disposed in line. One left, one right.
I'd like to reposition the two child div in a responsive design. How can I do?
I've created the page with this HTML:
<div id=contenitore class=clearfix>
<div class="imgsx"> Content </div>
<div class="txtdx"> Content.</div>
</div>
This is the CSS.
#contenitore {
position:relative;
}
.txtsx {
width:60%;
float:left;
}
.imgdx {
width:40%;
float:right;
As far it works well.
When I use a rule for responsive it doesn't work. My need is to put the div txtsx above the txtsx, full screen on mobile devices.
this is the CSS I've used:
#media screen and (max-width: 60em)
#contenitore {
clear: both;
padding: 0px;
margin: 0px;
}
.txtsx {
width:100%; !important
}
.imgdx {
width:100%; !important
This does what you asked for:
CSS:
#contenitore {
position:relative;
}
.imgsx {
width: 60%;
float: left;
}
.txtdx {
width: 40%;
float: right;
}
#media all and (max-width: 200px) {
.txtdx, .imgsx {
width: 100% !important;
}
}
Fiddle: http://jsfiddle.net/Hive7/MP3qP/2/
Normal CSS float both on left...
#contenitore {
position:relative;
}
.txtsx {
width:60%;
float:left;
}
.imgdx {
width:40%;
float:left;
}
In query resize float them right
#media screen and (max-width: 60em) {
.imgdx, .txtsx {
float:none;
width:100%;
}
}
Is what I think you're asking for...
I'm trying to get a div to disappear using
#media all and (max-width:1000px) {
#triangle{ display: none; }
}
but it's not working for me for some reason. This is the CSS of the div:
#triangle {
width: 0;
height: 0;
position:absolute;
top:110px;
right:250px;
border-bottom: 100px solid #d8e2ff;
border-left: 100px solid transparent;
border-top-right-radius: 0%;
display:inline-block;
}
Here is the website : http://www.ciaransmith.ie/aboutme.php. The div is the triangle of the speech bubble
Any ideas?
Also, my contact page is displaying wonky sometimes, and other times it displays fine, why is this happening?
Try this
#media all and (max-width:1000px) {
#triangle{
display: none !important;
}
}
Please place the code in the file itself not in CSS file
I could only find this:
#media all and (max-width:1000px) {
#whiteback { display: none; }
}
Which targets the wrong ID. Perhaps I missed the correct css but either way style isnt being aplied so the current issue is either the ID, or the media syntax
display: inline-block; isn't wrapped in a media query. Add this:
#media all and (min-width: 1001px) {
#triangle {
display: inline-block;
}
}
First of all, here's the jsfiddle for the particular markup/styling in question.
Main question is why the img and text box (dark_block) do not have the same margin. Both are set to 100% width of the container div, so I'm not sure what's up. Mind taking a look?
Other things I'm still trying to figure out and googling (thus far) has not helped me:
When the text box is in-line (to the left) of the photo container, how do I get it to be the same height as the photo container
If the image's width is smaller than the photo container, how do I get it to center horizontally and vertically?
For accessibility sake, can I just create a non-responsive version of the css before the #media tag stuff?
Sorry, I'm sort of new to web development, and any help would definitely be appreciated. Also if anything in the code fragment seems awfully done, call me out! I'd love to learn some best-practices in addition to solving the issue at hand. Especially display types, having a hard time wrapping my head around 'em.
Appreciate you taking the time to look at this!
John
CODE:
<div id="home_top_container">
<div id="photo_slider">
<img src="redacted">
</div>
<div id="dark_block"></div>
</div>
#home_top_contianer {
width: 100%;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
#media screen and (min-width: 800px){
#photo_slider{
float:right;
background-color: #cccccc;
padding: 0px;
width: 69%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#photo_slider{
float:none;
background-color: #cccccc;
padding: 0px;
width: 100%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (min-width: 800px){
#dark_block {
float:left;
background-color: #383838;
padding: 10px;
width: 28%;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#dark_block {
float:left;
background-color: #383838;
margin-top: 20px;
padding: 10px;
width: 100%;
min-height: 200px;
display: inline-block;
}
}
img {
max-width: 100%;
margin: 0px;
}
You need to read up on the CSS box model. The width of an element refers to its content. The padding, border and margin are then added it to it. That means your #dark_block is actually 100% + 2*10px wide.
The proper solution would be to set #dark_block to display: block and remove both floatand width. The default value for width is auto, which automatically makes the block as wide s possible without overflowing. Rule of thumb in web development: If you give a display: block element width: 100%, then you are doing something wrong.
Another simple solution would be to set box-sizing: border-box; on #dark_block, however box-sizing is a relatively new property, so it won't work if you need to support older browsers.
Getting them to the same height, is not a trivial thing. You could use the display: table-* properties, and give them height: 100% but that requires you to put #dark_block first in the HTML.
Quick example:
<div id="home_top_container">
<div>
<div id="dark_block"></div>
<div id="photo_slider">
<img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg">
</div>
</div>
</div>
#home_top_container > div > div {
display: table-cell;
width: 50%;
border: 1px solid red;
}
img {
width: 100%;
}
Again centering vertically is not a trivial thing in CSS. Your best bet would be to use display: table-cell with vertical-align: middle.
Most certainly. Especially you should move all properties that are common to all media-variants to outside the media rules, so that you don't repeat them.
Also it's no need to repeat the media rules around each rule. Just have one media rule:
#media screen and (min-width: 800px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
#media screen and (max-width: 799px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}