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%;
}
}
Related
I have done a website in ReactJS and SASS. Everything went well until I tried to make it responsive. The width is weird on smaller devices.
This is the website: https://uidea3.netlify.app/
Help me! Thank you!
Your .header class has fixed width of 1024px. Remove it and the website will not overflow. If you need to make it responsive then you can add the media query like this. You will need to figure out the correct breakpoints for your use case you may refer to the bootstrap breakpoints
#media only screen and (min-width: 1023px) {
.header {
width: 1024px;
...rest of properties
}
}
#media only screen and (max-width: 1023px) {
.header {
width: 100%;
...rest of properties
}
}
Explore on react-media a package available in npm. It will render component or element based on your configured device size.
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!
I am building a website with wordpress.
The url is here
My problem is that the menu is overlapping with the logo until the screen size is 1300px ... can i force the mobile / burger menu to appear until it has 1300px or is there any other solution for this?
Try this:
#media only screen and (max-width: 1300px) {
.main_menu {
display: none !important;
}
.mobile_menu_button {
display: table !important;
}
}
Here's an example of using media queries to drop you navigation below your logo if the screen width is above 1300px, and below 1500px (since it looks fine on wide screens).
#media (min-width: 1300px) and (max-width: 1500px) {
header .header_inner_left {
position: relative;
left: 0px;
top: 0;
}
}
You'll have to add this to your stylesheet and play around with the dimensions of your query, but this should solve the collision issue. You can also use media queries (like your theme is doing when it turns the navigation into a hamburger stack navigation) by switching styles in your stylesheet based on the screen size. There are more than one styles that are being modified to create a functional mobile navigation, so this route may be the easiest if you want to avoid needling through the core theme code.
Hope that helps! Good luck :)
I'm new to WordPress and CSS; currently creating a WordPress site and on the last stretch. I need to figure out a way to override the current padding on desktop and laptop sized browsers, as the elements are stuck in the middle with padding on either side on mobile devices.
I've tried to create my own CSS but it's not working (im rubbish) so I'm hoping some experts can help. I tried this below-
#media all and (max-width : 780px) {
.column{
padding-left:0px;
padding-right:0px;
}
}
The webpage I'm testing it on is https://www.xordium.co.uk/your-cloud-journey/
Thanks!
#media only screen and (max-width: 600px) {
.vc_custom_1528804063483 {
padding-left: 20px !important;
}
}
simply put this in your style.css file with the width you have set your width as i write 600 for example.
Hope this will work for you.
I am developing a website with a desktop and iPhone 4 viewport. When I am doing the bulk of development and viewing it through my desktop's browser using a viewport chrome extension, it is rendered fine and looks good. But when I view it on my iPhone 4s the width is corrupted. I have no logic that tells it to act like this. I cannot see what the issue is, was wondering if anyone could think of some possible problems?
Desktop (at 320 viewport): -----
iPhone 4S:
Query used for the .container{} class that wraps the entire site.
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (min-width : 320px) {
.container {
width:75%;
}
}
Many thanks for your help.
You likely have two problems at work here that are unrelated to your .container. Why do I think this? Your menu is showing up nice and large but your other content isn't. You said .container wraps everything. So we shouldn't be seeing a discrepancy there.
So, you're two problems are likely related to:
You're probably missing some meta tags in your <head>. It looks like media queries seem to be working for you, but your scale is off. Try adding in <meta name="viewport" content="width=device-width, initial-scale=1">
Your menu styles. Do they have a set size? Is there a media query that's adjusting it?
Without seeing the menu styles, I can't really say what exactly is wrong there...
use this code for iphone 4
Screent width Between 320px to 480px
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media and (min-width : 320px) and (max-width : 480px) {
.container {
width:75%;
}
}
Else use below code for <320px widht screen
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (max-width : 320px) {
.container {
width:75%;
}
}
And your mistake is, You wrongly put min-width : 320px instead of max-width : 320px
More...
My best guess is that it's something to do with the Retina display. The viewport on your desktop measures pixels on an ordinary display. On a 4s 320 pixels are not actually full screen - instead it's 640. You should check out the device pixel ration query http://css-tricks.com/snippets/css/retina-display-media-query/