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.
Related
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'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.
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 am trying to overide bootstrap's media query and it seams no matter what i do, nothing is willing to work.
This is the code that wont work for me
#media (max-width : 1200px) {
.navbar{
width: 90%;
}
}
Please Provide Your HTML,
try !important to Overwrite the Property.it will give priority to your overridden Code
Solved by #Drew_Kennedy:
Try using !important, or make your own navbar class. You can get
Bootstraps css from the dev tools, and change what you want.
I made an example for you based on his comment:
Example
CSS:
#media (max-width : 1200px) {
.navbar{
width: 90% !important;
}
}
For other examples of when to use !important