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/
Related
I am using the woocommerce order builder plugin on the shopkeeper wp theme.
in the default advertised look, the order builder should take over the product page making it easily legible but this theme seems to have its own rules.
instead of the full page, I get the woocommerce placeholder image on the left of the page and the order builder squeezed into the right side making it hard to comprehend what you are ordering.
I read somewhere I need to "use CSS to force the element you want into correct positions and display" but don't know how to go about it.
your help is sorely needed.
Big caveat: I think you're much better off editing the HTML here - removing the section you don't want and adjusting the column styling classes on the part you want to widen. Hooks can provide a clean way to do this, or you can override template files: https://docs.woocommerce.com/document/template-structure/
But, in the interest of getting you a quick (albeit hacky) fix, here's some CSS for you:
.product_content_wrapper>.row>.large-6.medium-12.columns {
display: none;
}
.product_content_wrapper>.row>.large-4.xlarge-5.xxlarge-5.large-push-0.columns {
width: 100% !important; /** This is the really hacky part**
}
This could have unexpected and unintended results in the long term, because, although it is as precisely targeted as possible, it is re-styling helper classes in unintended ways.
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 using Ckeditor to create content for posts and pages. I wonder how to make the content responsive(not to purchase some ckeditor bootstrap plugins)?
There are two possible way that come to my mind:
1. Parse the raw html code generated by ckeditor and add bootstrap classes to corresponding html tags (e.g. img-responsive etc) before storing the data in database.
2. Add media queries in css files.
I don't know which is the better way and how to implement each of them. I appreciate your suggestions! Thanks in advance!
I would advise you to dive into your second option: CSS media queries. It will allow you a greater scope of customization and ultimately benefit your development skills. Media queries are brilliant to know how to use, and aren't too difficult if you already have an understanding of using CSS selectors and attributes.
If you are using ckeditor yourself (as opposed to your users creating content) then you can use 'Source Mode' plugin to edit the raw html and add the bootstrap classes you need.
This is based on the assumption that bootstrap is already loaded on to any pages which will display the ckeditor content or the script is included through 'Source Mode'.
http://ckeditor.com/addon/sourcearea
For mine I wrapped all my ckeditor contents into a div with class .note-content and set the max-width of media located in the div.
.note-content
{
img, iframe {
max-width: 100%;
height: auto !important;
}
}
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 }
}
I'm having some issues with css and inline styles on an email campaign I'm doing.
Firstly I ended up cheating a bit in that I was hiding elements (display:none;) to make them appear in the right order when using the #media css. The issue here was when displaying on a desktop isp (gmail) it ignored the (display:none;) and ended up showing double content in places. So to the double content disappear I used (display:none !important;) which then affected the mobile version.
There are some mobile templates I've seen online which don't appear to have had much testing as they simply do not work across multiple mail clients.
The code is here if anyone has any suggestions or help http://www.makeyourownmarket.com/test/test-doc.html
Some tips for responsive emails:
Put your !important declaration on all of your #media only screen and (max-width: 480px) CSS
Think of workarounds, if display:none; isn't working, try width:0;height:0; on your inline CSSand then override with width:100px !important;height:100px !important; in your mobile styles
You will need to do extensive testing, having an account/device for all the significant email clients is the best, but http://www.emailonacid.com works in a pinch.
I'd recommend doing a little more research into HTML emails and their limitations.
This article is a good starting point:
http://kb.mailchimp.com/article/how-to-code-html-emails
Some tips:
Don't place CSS in a STYLE tag as this won't work across all email clients.
Use inline CSS only
Use Tables for layout
I would be very surprised if media queries would work consistently in email clients. I'd avoid trying to use those and instead concentrate on creating a basic, solid email template which displays consistently across the most popular email clients.
I dont think responsive design is the right way for emails. Usually emails are made inside the table because of many mail clients. You could find more about this here Nettuts