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.
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 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.
Sorry for the extremely novice and beginner question, but I just can't seem to figure this out.
I want to use Bootstrap 4 container class along with the container media queries, because I very much like how BS wraps the content in the container and the responsiveness of it.
I've read a few things stating that you should really code for mobile first, but I've also seen people suggest that it really doesn't matter if you code for mobile first or desktop first. I've been designing for desktop first so it's just easier for me right now, and the BS container class starts with mobile first and then ends with desktop. I'd like to use their container class, with the same widths and values, but I just want to switch to desktop first (have desktop be the default one) and then end with mobile, instead of the default way of mobile first and then ends with desktop width, like I said above.
For the life of me I just can't seem to figure out how to edit the media queries for the container class to do exactly what I said. I've switched the order, used max-width instead of min-width and I just can't seem to get it to work at all, and I can't figure out what I'm specifically doing wrong.
Here are the usual BS4 container class media queries. Can someone help me edit this so it starts with desktop first and ends with mobile?
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
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 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/