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
Related
I'm trying to move the menu sidebar from the left to right side. The changes to .main-sidebar and .main (the content) swapping the float values left/right breaks the menu.
Here's a demo page https://demo.competethemes.com/?theme=author
#media all and (min-width: 59.375em) {
.main-sidebar {
float: right;
width: 27.775%;
padding: 3em 1.85185%;
min-height: 100%;
}
#media all and (min-width: 59.375em) {
.main {
float: left;
padding: 3em 5.555%;
width: 72.215%;
}
Any ideas?!
looks like the easiest way is to use transform to mirror the layout .
You can load this part of CSS after any other css rules/files :
#media all and (min-width: 59.375em) {
body,
#main-sidebar,
#main ,
footer.site-footer[role="contentinfo"] {
transform:scale(-1,1)
}
}
if you want to see what it does , add a delayed transition :
#media all and (min-width: 59.375em) {
body,
#main-sidebar,
#main ,
footer.site-footer[role="contentinfo"] {
transform:scale(-1,1);
transition:1s 1s
}
}
Copy the following command to the global css field.
don't Copy in the #media
.main-sidebar{
float:right;
}
I hope your problem is solved
Alright so for some reason I've been trying to figure this out but can't. What's wrong with this? It's not being called at all. I'm trying to basically setup a simple responsive theme.
It is kind of strange inside the notepad++, when I type like #medi it will be blue but once I add #media it will go black.
#media only screen and {min-width: 150px} and {max-width:600px} {
body {
width: 100%;
font-size: 100%;
background-color: black;
}
#header {
width: 50%;
height: 50%;
margin-top: 10px;
}
}
Change your curly brackets to round brackets and it will start working..!
#media only screen and (min-width: 150px) and (max-width:600px)
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;
}}
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;
}
}