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 :)
Related
Look at this page
There are 3 images on the right. When I look at my site with a mobile device, those 3 images stay there instead of centering in the middle, and so they make the page overflow/have a left-right scroll.
Any ideas on how I can fix it so that the images get centered when the page is viewed on mobile?
Thank you
Use a CSS media Query
The code used in the example you gave is
#media (max-width: 600px)
.about-us-images {
width: 100% !important;
}
The #media (max-width: 600px) part is telling the page to only apply those styles when a page width is 600px or less.
Adjust it to Your Preferences
You can adjust that to any size you wish or use the reverse to style any page that is 600px or wider using: #media (min-width: 600px).
Try this—
#media (max-width:600px) {
.about-us-text,
.about-us-images { width:100% }
}
Just add a class to the images div, and change the breakpoint as you wish. Looks like this now—
Here is what I had to do.
#media (max-width:600px) {
.about-us-text {
float: none !important;
width:100% !important;
}
}
#media (max-width:600px) {
.about-us-images {
width: 100% !important;
}
}
That did it.
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 using WordPress 4.3.1 with Newspaper theme. The top bar menu having social links and buttons like "submit content", "contact us" "date" etc is not visible in the mobile view or whenever I make the screen size small. Please help me with issue.
Website name : www.teachologist.in
In the theme style sheet there are media queries that hide the elements at max-width: 767px. You would need to remove the display: none; and perhaps replace with other appropriate styles to make the menu still look good on small devices.
See wp-content/themes/Newspaper/style.css Line 1185
#media (max-width: 767px) {
.td-header-top-menu-full {
display: none;
}
}
And see wp-content/themes/Newspaper/style.css Line 4946
#media (max-width: 767px) {
.td-header-sp-top-menu {
display: none !important;
}
}
My Theme Was Supposed To Be responsive But when I uploaded Logo In My Site, It stop Being Responsive. So can i have one logo(big) for non-responsive design and other (small) for responsive design.
When would you want it to be responsive and when would you want it to not be responsive? Most of what you sound like you want to achieve could be done through media queries.
.logo{
background-image: url(images/image_nonresponsive.jpg);
}
#media (max-width: 320px) {
.logo{
background-image: url(images/image_responsive.jpg);
}
This will enable your responsive logo at 320px width.
There is another method:
HTML
<img src="logo_mobile.jpg" class="visible-mobile" />
<img src="logo_desktop.jpg" class="hidden-mobile" />
CSS
.visible-mobile{ display: none; }
.hidden-mobile{ display: inherit; }
#media (max-width: 320px) {
.visible-mobile{ display: inherit; }
.hidden-mobile{ display: none; }
}
This will show or hide your logo depending from your screen size.
You can see an example here: http://cdpn.io/wyqxz
The difference is that in this case both images will be loaded from your browser so is not the best solution for your site performances.