I have a responsive wordpress theme but my featured boxes are not responsive in tablet or mobile mode. They appear stretched out and much bigger than their original size. I tried adding media queries to the css stylesheet and using various plugins but I don't know what else to do. All the other images on my site are responsive on all devices.
This is the media query I tried using:
#media screen and (min-width: 1024px) and (max-width: 1139px) {
div.featured-box {
margin-top: 135px;
}
}
#media screen and (min-width: 1140px) {
div.featured-box {
margin-top: 70px;
}
}
thank you for your help!
Related
I am including two picture of the same section to illustrate what's happening on the website when I drag the screen to a smaller size. I am hoping to use the media queries to prevent such a thing from happening. Dragging the screen size smaller is changing the text and the size of the elements pictured. When I input the media queries into custom css, I see nothing change and my goal is to have the screen size look very similar across all screen sizes that use the website.
Before dragging screen to smaller size:
enter image description here
After dragging screen to smaller size:
enter image description here
/*For browser/screen widths less than 768px*/
#media screen and (max-width: 1440px) {
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-height: 900px){
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-width: 900px) and (orientation: portrait) {
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-width: 1440px) and (orientation: landscape){
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
I've tried multiple css media query styles and I have not seen any changes to any pages of the website. Please help me to assess what I am doing wrong. I am exploring all options to make this website responsive. The divi builder only provides three options, desktop, tablet and mobile for screen sizing. I need more screens recognised which is why I am using custom css for this project. I have noticed especially on macbook air that the screen size is having multiple issues accommodating the size of elements on each page. Some images are cutoff on pages and some are turning into different weird sizes that were not intended to do so.
Thanks in advance!
I was designing a wordpress page with elementor. The site is perfect in desktop. But while on mobile, the first section of the elementor is not displayed. Is there someway I can fix this with custom php code?
The issue is caused by CSS code,
The following CSS code is causing the div height to be 1px which makes it invisible:
#media (min-width: 768px)
.elementor-section.elementor-section-height-full>.elementor-container {
height: 100%;
}
The expression
#media (min-width: 768px)
Applies the code only for screens with a higher width than 768 which makes it unsupported for mobiles.
To fix this you need to apply the following code to your custom CSS:
#media (max-width: 768px)
.elementor-section.elementor-section-height-full>.elementor-container {
min-height: 350px;
}
Give it a try and let me know.
I'm working on my personal WordPress site, and when using media queries in the WordPress theme customizer, my site does not respond to the changes I've made to the background.
I am running the Divi theme, and used Chrome's inspect element to find which class I need to be changing.
#media only screen and (max-width: 768px) {
.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
}
}
#media only screen and (min-width: 769) {
.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
}
}
I expect the background of each page to change to "echelon-enterprises.jpg" on desktop, and to "mobile-floor.jpg" depending on the screen size. What am I doing wrong here? Am I just targeting the wrong class? I have also tried the "et-main-area" class, still not luck.
You're missing px for the second declaration
#media only screen and (max-width: 768px) {
body.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
}
}
#media only screen and (min-width: 769px) {
body.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
}
}
My site is set to have a centered view on desktops.
[Screenshot of Desktop view]
However, it is showing a centered view on mobiles as well. This is not a good experience.
[Mobile View Screenshot]
I want a full width view on the mobile view as well.
What would you guys suggest?
I am using the X Theme for Wordpress.
Thanks
Set a media query : learn more about media queries here https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries
Something like this (on your stylesheet)
#media (max-width: 850px) {
.container {
width: 100%;
}
}
Used media query for that set 100% width in your container
#media (max-width: 980px){
.x-container.width {
width: 100%;
}
}
I'm trying to create a responsive design using Twitter bootstrap. Everything is going well but I cannot figure out how to set a minimum width for desktop users.
When a user is on a desktop I don't want them to be able to shrink the browser to the point where they see responsive features meant for the phone (e.g. the navbar mobile button). I would rather just have a horizontal scroll bar when the browser gets too small. How can I get this functionality without affecting the mobile layout?
You can address this with a media-query. The only problem is that you have to set a fixed width for this, min-width doesn't seem to work in this case (tested in Firefox and Chrome). If this is fine for you, you can try the following example:
// Should be something > 1024
#media only screen and (min-device-width: 1300px) {
body {
width: 1300px;
}
}
To replicate the way that logicvault.com have their site working you would need to change the Bootstrap CSS so that you only have one media query which kicks in at 480px.
Here's the media query they have set:
#media only screen and (max-width: 480px){
// styles here
}
I was able to achieve this functionality by using Frederic's advice:
// Should be something > 1024
#media only screen and (min-device-width: 1024px) {
body {
min-width: 1025px;
}
}
However, I also needed to adjust the bootstrap responsive files so the styles were only applied to touch devices. I ended up including Modernizr on my page and looking for the touch class.
E.g. change:
#media (min-width: 768px) and (max-width: 979px) {
// Styles are here
}
to:
#media (device-min-width: 768px) and (device-max-width: 979px) {
.touch {
// Styles go here
}