I use WP 4.9.2 and Leto theme from aThemes. The site that I built on it looks great on bigger screens, but is really screwed up in mobile. I checked the stylesheet - the problem is related to the #media queries. I just don't seem to be setting in the right way ( the css). So, I need to know how to style or what css to use to set the thing up. The theme I use is Leto, and I use WooCommerce plugin. So the responsiveness of the site is perfect on all pages but this one, which in my opinion, utilizes WooCommerce. Anyone anywhere any help is welcome.
Here is the you can look up the whole stylesheet -->stylesheet. You can download the theme in the first link, which was to Leto.
You can use media query:
#media only screen and (min-width:280px) and (max-width:480px){}
#media only screen and (min-width:481px) and (max-width:619px){}
#media only screen and (min-width:620px) and (max-width:767px){}
like :
#media only screen and (min-width:280px) and (max-width:480px){
body{
do_stuff_here
}
.wrapper{
do_stuff_here...
}
}
OR Please read :
https://codex.wordpress.org/Styling_for_Mobile
Related
This is a full-screen view of the amazon website
This is responsive view
I want to do like this how can I do that using CSS
I would suggest you to read this post
https://stackoverflow.com/help/how-to-ask
Specifically we could get more information about what you have already tried doing.
You can use css media queries to manipulate the layout of the website.
reference link
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
I suggest u for using bootstrap. It's easier way to learn responsive website
https://getbootstrap.com/docs/4.0/getting-started/introduction/
After that, u can build miniproject to learn it.
I'm trying to use OceanWp theme.
And I have imported demo data "Lawyer". And modified it for myself.
This is a demo: https://lawyer.oceanwp.org/
The section "Why Choose Our Firm" does not apper on mobile phones.
Both in the demo, and in my case.
It has switched somewhere. I have also checked if a class is added manually. It seems that no class is added. But in fact elementor-hidden-phone is still present. Could you tell me what to look at to solve the problem?
There's a bug in Elementor: check "Hide On Mobile" and just uncheck it - class will disapper
Please use this CSS in the custom CSS plugin (https://wordpress.org/plugins/custom-css-js/)
#media (max-width: 1024px){
section.lawyer-firmvisible-section {
display: block !important;
}
}
To fix this via CSS, simply follow the below steps.
Once logged in, edit the "Why Choose Our Firm" section in the elementor.
Add a class, for example - "lawyer-firmvisible-section".
Put the CSS
#media (max-width: 1024px){
section.lawyer-firmvisible-section {
display: block!important;
}
}
I've set up a WooCommerce shop and it seems to work properly on desktop:
https://www.barefoottravelling.de/prints/
If I check the same shop/page on my mobile phone I can't see any products unfortunately. I've searched for advice a couple of days but couldn't figure out the issue.
Can anyone help?
In your css file, you have this property defined as:
#media (max-width:480px) {
.woocommerce-posts-wrapper .woocommerce-shorting-wrapper p {
display:none;
}
etc etc.
That means, if your width screen is less than 480px, the items will disappear. You can just remove it.
This is how it looks for me after removing it (You see that the items appeared).
For most of my blog posts I need to use two different images for desktop vs mobile.
Sometimes it's because of placement issues but it's mostly for promoting my products. I would like to have a wider image on desktop between paragraphs, but a more square shaped image for mobile in the same place so it isn't all squished and hard to read the text in the image.
I have done this using #media queries in my custom CSS template in my WordPress theme (Sprout), and it works fine usually - but not on my amp pages.
#media (min-width: 980px) {
img.beat-pcos-10-week-program-ad-mobile.aligncenter {
display: none;
}
}
#media (max-width: 980px) {
img.beat-pcos-10-week-program-ad-desktop.aligncenter {
display: none;
}
}
For example:
http://www.smartfertilitychoices.com/5-sugar-hacks-dessert-pcos/
vs
http://www.smartfertilitychoices.com/5-sugar-hacks-dessert-pcos/amp/
Towards the bottom of the blog post, there is an image promoting my 10 Week Program and using the code above, it shows a different image depending on browser width on the regular post, but not the AMP post.
Is there a way to hide the desktop version of the image on my AMP posts?
Thanks!
I'd strongly advice against using CSS media queries to show or hide images based on device dimensions (for AMP and non-AMP pages). The problem is: even if an image is hidden via display: none it's still going to be downloaded. This means in your case the user will always have to download both versions of your image which is a waste of bandwidth.
Here are two possible approaches to avoid this for AMP and non-AMP pages:
Non-AMP
For non-AMP pages you can use the picture element. It allows you to specify different sources for different device dimensions. The browser will only download the image that fits the current device:
<picture>
<source srcset="wide.png" media="(min-width: 980px)">
<img src="square.jpg" alt="...">
</picture>
AMP
AMP doesn't support the picture element, but you can replicate the behavior using element media queries:
<amp-img
media="(max-width: 980px)"
src="square.jpg"
width=400
height=400
layout="responsive">
</amp-img>
<amp-img
media="(min-width: 980px)"
src="wide.jpg"
width=1280
height=768
layout="responsive">
</amp-img>
This will also ensure that only one image will be downloaded.
img tags are not allowed directly in AMP pages; amp-img tags are used instead. So assuming that your img tags are being converted to amp-img tags, you can try to apply your media queries to amp-img with class beat-pcos-10-week-program-ad-mobile instead of img. Or better yet, apply your media queries to both amp-img and img tags with the beat-pcos-10-week-program-ad-mobile class (this way it will work for both AMP and non-AMP pages).
So:
#media (min-width: 980px) {
img.beat-pcos-10-week-program-ad-mobile.aligncenter,
amp-img.beat-pcos-10-week-program-ad-mobile.aligncenter {
display: none;
}
}
#media (max-width: 980px) {
img.beat-pcos-10-week-program-ad-desktop.aligncenter,
amp-img.beat-pcos-10-week-program-ad-desktop.aligncenter {
display: none;
}
}
Looking at your source code, you appear to be running AmpForWP, and you seem to be already using the custom CSS editor. The beat-pcos-10-week-program-ad-mobile class does not seem to be defined anywhere on your AMP page, so the solution is to post your CSS into AmpForWP's custom editor as well as your main desktop theme's one.
I've been given the task of customising certain elements of a site which is using Twitter Bootstrap 3.0.2.
The site will be using default Bootstrap styles and responsive layouts except for a particular custom CSS theme file whose modified styles will only be applied when certain users access the site via certain means.
In any event, I need to disable just the .xs responsive layout and nothing else. This means that the screen must retain a small screen layout on resolutions below 767px.
I've looked at many answers on this site and the closest one is this one that describes editing the existing bootstrap.css file.
I don't want to edit the core bootstrap files but simply want to override the .xs layout in a custom CSS file that is called after the bootstrap file.
I'm not sure how or what I should be editing as the media queries look like the following and it's a bit confusing to me.
#media (max-width: 767px) {
.hidden-xs,
tr.hidden-xs,
th.hidden-xs,
td.hidden-xs {
display: none !important;
}
}
#media (max-width: 767px) {
.hidden-sm.hidden-xs,
tr.hidden-sm.hidden-xs,
th.hidden-sm.hidden-xs,
td.hidden-sm.hidden-xs {
display: none !important;
}
}
Any and all answers are greatly appreciated.
Thanks in advance.