can someone please help me about this Wordpress CSS problem. On the checkout page the payment methods float right and for some reason the method description text is 'vertical', instead of having sentences in the full row, only 2 or 3 letters appear in each row (image included).
When I change the window size (and on mobile) everything looks okay.
Can anyone help me with some css code which would fix this? I don't know how to edit stuff that isn't in styles.css.
The problem
when i resize the window / mobile screen
The link:
https://zelenakuca.com/checkout/
Thank you!
Paste media code with style before line code
</style><noscript><style type="text/css"> .wpb_animate_when_almost_visible { opacity: 1; }</style></noscript></head> in index page or file.
#media (min-width: 1025px)
{
#order_review {
width: 100%;
}
}
Please try these CSS:
#media (min-width: 1025px){
#order_review {
float: none;
width: 100%;
}
}
Related
I was wondering if anyone has attempted to create responsive spacers and come across the following issue.
I am trying to customize a specific spacer in my home page such that below a certain screen size (i.e width), the size of that particular spacer will be zero pixels. I am using word press and Elementor pro.
What i have tried to do is select the spacer, right click then edit spacer --> advanced --> custom css ... and i have inserted the following code however nothing seems to happen:
/* Remove spacer block */
#media screen and (max-width:740px) {
.spacer-block {
display: none !important;
}
}
I would really appreciate some help with this.
Many thanks,
MJ
I would recommend you to use margins instead of the spacer. For example:
#media screen and (min-width:741px) {
.my-element {
margin-top: 50px;
}
}
#media screen and (max-width:740px) {
.my-element {
margin-top: 0px;
}
}
I installed a plug-in called Display-listings-shortcode, and added the columns-extension to allow for columns the blogs halfway down the homepage at RitaNaomi.com will be horizontally displayed on a web browser. It looked whacky at first with titles being scrunched beside and underneath the image, but eventually i figured out how to edit the .display-posts-listing class to change the display
.display-posts-listing .listing-item {padding-bottom:30;}
.listing-item
{
float:left;
width:22%;
margin: 40px
}
But when I look at it on a mobile device, they're all scrunched together as if it was still being displayed on a laptop. I want to have it listed vertically and not horizontally, because thats the way it would fit best.
I tried (and it didn't work) to use #media to change it through the css, but it didn't work.
#media handheld {
.display-posts-listing .listing-item {
clear: both;
display: block;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
}
You shouldn't be using #media handheld {} since it's been deprecated according to MDN.
You're better off targeting pixel-width values. You may need a couple queries, and some of the oldschool standards were 1023px, 767px. Feel free to replace the 900px below with whatever works for you.
#media only screen and ( max-width: 900px ){
.display-posts-listing .listing-item {
/* CSS Here */
}
}
Removed the custom CSS that was already added from the original theme. It was interfering with the Columns display.
Not using #media handheld {} because it was deprecated (thanks to xhynk for the response), and instead used the command (max-width: 768) , the point at which the title and image css look funky.
To make the title display on its own line on a bigger screen, i added this to my CSS:
.display-posts-listing .listing-item .title { display: block; }
And now i'm using the above media query to figure out how to style it on smaller devices.
Complete CSS: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a
I am helping out producing a website for a friend but the header isn't fixed at the top, it overlaps the slideshow at the moment. However if I collapse the screen to 'ipad' width the header is fixed at the top.
This is the site at the moment: http://www.testing-30-10-1993.com/
I don't want to risk editing code in case it messes up. I purchased this theme from Template Monster. I just really want the header/nav to be fixed like if you drag the website width to ipad size.
Can anyone help? Alternatively does anyone know anyone/website where I can pay someone to do this? Cheers & appreciate all help. I would add in code but I'm not even sure what section of the code I should copy.
x
If you are not afraid to edit a line of code, go to line 844 of the main-style.css file in the folder to find this declaration:
.page-template-page-home-php .header > .container > div {
position: absolute;
}
Change it to this:
.page-template-page-home-php .header > .container > div {
position: relative;
}
Otherwise, if you'd prefer not to mess with the theme's files, install a plugin for adding custom CSS and paste in the following code:
#media (min-width: 1200px) {
body.page-template-page-home-php .header > .container > div {
position: relative;
}
}
Good luck!
I think I am going insane. I cannot figure out why this pricing field all of a sudden stacks below 641 px. Can anyone help me out?
I think I need a new set of eyes to look at the code!
http://forfattarskola.staging.wpengine.com/bildkort/bestall-bildkort/
Good
Bad
Without the code to look at and just the page source it looks like you need to change this css class to use inline-block and not block
#media only screen and (max-width: 641px) .gform_wrapper .ginput_container span {
display: inline-block;
}
try:
#gform_fields_4 li {
min-width: 200px;
}
#gform_fields_4 li * {
display: inline-block;
}
i tested this on your page through chrome debug, and seems to work. add this CSS to page and voilá!
#media screen and (max-width: 1336px) {
.rectangle-box {
visibility: visible;
}
#p-cactions {
top: 461px;
left: 410px;
}
}
#media screen and (max-width: 1040px) {
.rectangle-box {
visibility: hidden !important;
}
#p-cactions {
top: 461px !important;
left: 1110px !important;
}
}
I put these on the top of a css files code and they work but when i put them on the bottom of the code in the css file they dont work at all. Why is my css working in reverse? im using chrome. the css file is main.css for monobook skin in mediawiki. I guess its good i got it to work im just curious.
You must not edit main.css or hack other code code directly! The results are not predictable.
Use the gadgets extension and manage your JS/CSS directly on your wiki. There are gadget options to make them top-loaded if needed.
If you want to do more complex things server-side, read the developing with ResourceLoader doc page. It also has advice on media queries and what to top-load.
I have already figured out a way to make this all work in main.css in a very predictable way. thanks but i have already solved the problem. I changed #media screen to #media. i placed this at the bottom of the css file and it works.