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;
}
}
Related
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?
My site: https://www.gameron.pl/
I need to make the theme like in the screenshot for the resolution 719px and below:
I mean posts list of course. I tried to achieve it with various codes, but each works only on one resolution and is not adjusting to other resolutions.
Here's what works:
#media (max-width:719px){
/* Thumbnail Image */
.main a .wp-post-image{
width:50%;
}
}
Now I just need to move and adjust post title properly. Does anyone have an idea how can I do it? I feel like I tried everything.
The problem is your .post-thumbnail has float:none, and your .post-content has float:left.
I changed it in the console so both float:left and width:50% and it works fine:
https://i.imgur.com/Q8BFev0.png
#media only screen and (max-width: 719px) {
.post-list .post-thumbnail {
float: left;
max-width: 50%;
}
.post-list .post-content {
float:left;
width: 50%;
}
}
You can do it as follows:
#media only screen and (max-width: 719px) {
.main .post-list .post-thumbnail,
.main .post-list .post-content {
float: left;
width: 49%;
}
.main .post-thumbnail {
margin-right: 0.5em;
}
}
Result
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.
here my website I´m working on: http://www.whatsahoy.com/
My problem: I want the input field next to the button. If I add a float left, it goes next to each other but with a weird <br>. And then the whole thing is also on the left. I want it to be in the middle.
Can somebody help me please?! Thank you very much!
Barbara
To provide you with the best solution, it would be helpful to see the source code of your form. The <br> is probably in there somewhere. However, here is my reply based on what I can see. If it does not help, I suggest you update your question.
Adding the following styles to your custom CSS will put the field and button next to eachother until screen width of 767px.
.wpcf7-form p {
display: inline-block;
width: 470px;
max-width: 95%;
}
.wpcf7-form p br {
display: none;
}
If you would like them next to eachother on smaller screens, you could change the width of the frame. This changes on 767px as set by your theme. I'm not sure this will not have an undesired effect elsewhere on your site, but you could try.
#media only screen and ( max-width: 767px ) {
.et_pb_row {
width: 600px;
}
}
However, it then will be crippled on screens as from 600px. It may be better to make the text field smaller then...
#media only screen and ( max-width: 600px ) {
.wpcf7 input {
max-width: 50%;
}
}
You might want to fine tune this a bit, but I hope you get the idea.
GL!
.wpcf7-form-control-wrap {
display: inline-block !important;
margin: -8px;
}
form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
display: flex !important;
justify-content: center !important;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit {
border-radius:0px !important;
width: 30%;
}
#media only screen and (min-width: 50px) and (max-width: 600px) {
div#wpcf7-f698-p10-o1 {
width: 130%;
}
#media only screen and (min-width: 50px) and (max-width: 600px) {
input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
width: 235px;
}
form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
display: flex !important;
padding-right: 70px;
}}
This is the website, and more specifically, the page.
I'm currently working on a responsive theme, which has media queries, but something about the CSS modifications I've made, are preventing the menu (top right in gold), and the sidebar (this only exists on the blog page, but it is important... it's the box at the right of the content block) from merging with the header/title/left-hand content. It shows up on the ipad mini, the regular ipad 4, but it is okay in an android browser screen. You can observe the issue by resizing the browser.
#media only screen and (min-width:768px) {
.site-navigation .nav-menu {
display: block;
}
}#media only screen and (max-width:767px) {
.menu-toggle {
display: block;
}
}#media only screen and (min-width:768px) and (max-width:959px) {
.wrap {
max-width: 728px;
}
That is the media screen css. The respective divs are all positioned relatively. Does anyone have any advice on how to fix this problem? Any code tidbits?
The first thing I see is that this HTML is not closed:
<div id="header" onclick="location.href='http://camillagabrieli.com
That needs to be fixed first. Try adding outlines to your CSS:
* { outline: 1px dashed black }
I find that helps a lot when it comes to seeing what's actually wrong with the different floated elements. There are quite a few things wrong with your arrangement and your CSS. You don't need to relatively position all of these things.
To fix the main content section:
Add the following to #main:
overflow:hidden;
And make #content and #sidebar-primary like this:
#content {
float: left;
width: 75%;
margin-left: 40px;
margin-right: 10px;
margin-top: 10px;
min-height: 50px;
}
#sidebar-primary {
float: left;
width: 20%;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
height: 50%;
}
I'm not sure why you had margin-top: -460px; in your code, but that was what was breaking it, as was the fact that #main wasn't actually containing #content and #sidebar-primary. The code still needs cleaning up, but this will fix it more immediately.
Does this help?