I am creating a website and I am trying to disable the responsive design feature. When I resize my browser, a few things get jumbled up, and I am not experienced with responsive design coding. Here is the link to my website
http://www.jiddrs.com
There is no simple answer to this, especially without knowing the code. It looks like the CSS for the search bar is out of place. Wordpress is a CMS that uses PHP to deliver content from the server. It compiles on a long running list of conditional statements that serve up content as needed.
Responsive CSS is completed by media queries. There's likely one stylesheet inside of your theme's folder labeled responsive.css or something similar.
Media queries look like this
#media screen and (max-width:640px) {
.classChange { style }
}
Related
I have an active child theme called "Hello Elementor Child". Since other people have problems overriding Elementor and add !important to every css rule, I have done the same.
My problem is that nothing is overriding. When I "view source" and find a background image used on the home page, I can confirm that the link to that image is good. But, it's simply not showing up on the site.
I do not want to add all custom code to Elementor editor (or a css plugin) because (1) I don't have the pro version for this budget-conscious client and (2) I don't want a bunch of code in the head.
The style.css document
https://trimedia.co/hccpersonalcare/wp-content/themes/hello-theme-child-master/style.css?ver=1.0.0
Link to the background image so you know what it's supposed to look like: https://trimedia.co/hccpersonalcare/wp-content/themes/hello-theme-child-master/images/men-masked-personal-care-wide.jpg
Test location is https://trimedia.co/hccpersonalcare
If you shrink the viewport of your browser you will see a background image appear. The trouble is with your media queries, #media all and (max-width:600px) is missing a closing bracket. You have so many queries in there, I suggest chunking your code under a handful of common breakpoints so you can keep track of what overrides what better.
I have 2x promo banners one for desktop (#usp-banner), one for mobile (#usp-banner2).
Each one should only be displaying to their respective sizes because of the use of the .css:
layout.min.css
#usp-banner2{display:none}html{padding-bottom:0!important}...
custom.css
#usp-banner2{display:none}
#media (max-width:767px){
#usp-banner{display:none!important}
#usp-banner2{display:inline}
}
Upon loading the page on Desktop or Mobile we see BOTH banners and their correct banner hides after about 1 sec. Source: https://www.ivyandfig.com
I am fairly new to Shopify, but am able to modify templates. I'm curious is this due to the way .css is loaded?
Anyone have suggestions on how to ensure the css is being loaded before the images display (as I am assuming this is part of what is happening)?
Most of the stylesheets and scripts on your site are being loaded via JavaScript. That JavaScript is triggered much later as compared to when the initial content is visible on your site.
As you have guessed, this is happening because CSS is loaded much later so for the time being both images are visible.
As that part is a Shopify section, a quick fix is to include the related CSS rules inside section. More of that is available on Shopify Documentation for Sections.
Another fix may be is to create a separate stylesheet with only rules like that CSS reset, hide and show content etc and include it via link tag in header.
You can also use some logic based on inline styles by hiding both initially and then display later via JavaScript.
I need help with CSS responsive styling for two tables.
Generally I use Wordpress with a strong emphasis on the non-programmer user being able to easily edit the page. I also use the theme without bootstrap :(
I want to get mobile look as below, without changing desktop one.
table,head,tbody,th,td,tr {
display: block;
}
Links to JSFidlle:
https://jsfiddle.net/682cqzd1/5/
https://jsfiddle.net/24gqc064/
I have 2 questions
how come does my css resets after using certain css code?
how come products other then on homepage is not showing in the middle on mobile
website url : (www.thevapeboys.co.uk)
I have a wordpress website with woocommerce installed I wanted to make mobile friendly so I installed a plugin called wptouch, I have added certain css values to it to make it more mobile friendly these are
these css script only triggers when someone from a mobile goes on the website
but the problem is I have carousal on the website which has next/preview and it dosent show the arrows for it so I tried adding this code to the css
.owl-nav .owl-next::before {
content: ">";
}
.owl-nav div::before {
content: "<";
}
I tried it with firebug and it looked all friendly but when i actually put the code in it resets all the other css values that i did before.is there a way it works without resetting the other css values because it works with firebug
when I go on shop the products and the font is coming on the left now i m not sure how to make them position all of them in the middle so it could be more mobile friendly.
Unfortunately the custom css file is first in line, which means it won't ever override anything. CSS works with a cascade meaning the last duplicate class wins out, according the browser. Put your custom css last and it will override.
You shouldn't need the WP Touch plugin as your theme is already responsive, in fact it's duplicating the mobile menu so I'd turn it off. https://woocommerce.com/storefront/ (search for the "Responsive" description box for proof of this)
Do the following to replace the icons, you need access to your custom javascript file: https://stackoverflow.com/questions/31605932/how-to-make-a-owl-carousel-with-arrows-instead-of-next-previous
I'm helping improve a Wordpress site with a responsive design. Currently, I have media queries set up for the different screen sizes, but there are no CSS rules in them right now.
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles go here */
}
Is there a way to edit and add brand new rules into the media queries live on Firebug? It would be more convenient than adding a "dummy" CSS rule, putting it on the FTP, then testing it in the browser and editing from there.
Thanks
Yes you can, just click on the CSS tab and then Source Edits. Then copy over your changes to your actual CSS if it's what you want. Just keep in mind though that you are defining your media queries with min-device-width, so on a desktop this will not render any changes because the device width doesn't change if you resize the browser.
Likewise, you can also use the Chrome's Debugger Tool - I find this a lot more helpful. You can make changes to the CSS on the "Elements" tab. Then click on the "Resources" tab find your Styles folder - Chrome will actually tell you which CSS files you've edited and also have them versioned for you. Simply right-click and save the version of CSS file that matches the edits you want.
If I understand your question correctly, no you cannot make edits in firebug that will affect your site permanently. You can alter the code to see what it does and then copy and paste it into a separate script. As for your answer though, you'll ultimately have to write a separate css script for it.
That would be nice if you could (maybe an upgrade), but it would probably require some sort of password for security purposes so not just anyone could edit it.