"overflow-x: hidden !important;" was causing an issue where the browsers side bar was getting cut off (overlapped). Removing this fixed that error, however, one and only one of the pages Header is running off the screen when viewing in mobile. Here is the code, changing the position from fixed to absolute fixes the issue but i need the header to be fixed. In Desktop view, everything is fine. only in mobile and only on one page. Its strange. Here is the code responsible for the size of the screen i am having issues with.
#media screen and (min-width: 321px) and (max-width: 759px){
.navbar-mj{
position: fixed;
width: 100%;
top: 0px;
z-index: 89;
background-color:#6782af;
margin-bottom: 0;
}
}
It's a little difficult to tell what your issue is without seeing a more complete example but what if you remove the width: 100% and then add right: 0 and left: 0?
try lower the (max-width: 500px);
it may help you instead of overflow the screen of the mobile view.
thanks
Related
I'm a newbie when it comes to coding (this is my first website) but I'm trying to modify the logo on my website. I would like to make it bigger and central. I am able to achieve this from the desktop view but it doesn't work on the mobile.
Briefly, the logo looks quite small on both devices, desktop and smartphone. So I add this code in Custom CSS (found on the web...):
.logo.logo1 {
width:100%;
text-align:center;
margin-bottom:20px;
}
.logo.logo1 {
width: 400px;
height: 100px;
}
.logo.logo1 {
position: relative;
top: 40px;
right: 130px;
}
With this in place, on my desktop the logo looks nice but on my smartphone it is small and goes too far to the very left of the screen, partially disappearing.
As I'm now approaching to coding, I have no idea whether it depends on a potential logo container or how to make it responsive on the smartphone. Truth is that the more research I do, the more I get confused.
Any help about how to fix this would be very appreciated :)
P.S. the website is this one
Gio
Add this to your css at the bottom.
#media (max-width: 767px){
.logo.logo1{
max-width: 100%;
width: 100%;
position: static;
top: 0;
right: 0;
height: auto;
}
}
Basically, what's going on here is that you are overriding a bunch of styles that your theme applies that make it tiny on small devices.
you should change css in media section for mobile view. use somethings like below :
#media (max-width: 767px){
/*
your css tags
*/
}
special in this issue you should change style-mb.css file in line 3048 and change your logo size
note: you can use mobile view in your browser to test mobile view in your desktop browser in developer tools
I want to make a sticky header in my website. I am trying following CSS but when I use the CSS below, My logo gets zoomed out when viewed on a mobile device.
URL of the website : http://gomodemo.se/port73/
CSS
#media only screen and (max-width: 768px){
header{
position: fixed !important;
top: 0px;
}
});
I do not have any issue on the desktop but on a mobile device, the logo gets zoom out.When I click on hamburger menu in the mobile device the logo gets zoom out. Not only logo my header section gets zoom out. Please help me to resolve the issue. Thank you
try this one:
.logo img {
height: 88px;
width: 72%;
}
When styling your logo, be sure to use percentage instead of pixels.
When using pixels, you are setting the position and size of your logo native to your resolution - causing it to look zoomed when viewed from a different resolution (because your mobile device might have a higher resolution). If someone who has a higher resolution views your website, there is an area which you have not covered because of the additional pixels on the resolution.
I advice you to use height value in Percentage.
And don't use important unless you don't have another options.
You can use below code:
#media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
.logo img {
margin-top: -10%;
max-height: 50%;
}
}
Hi I have looked at several stackoverflow questions on how to remove white space from a webpage (see selection below) but noone of the solutions given had any difference for me. The werid thing is that the whitespace only shows up when I look at my site on my mobile. The site in question is: http://moduleplanner.github.io/ and its corresponding github repo is: https://github.com/Moduleplanner/Moduleplanner.github.io
Thanks for the help. :)
Huge White Space At Bottom Of Page
Eliminating white space at bottom of page
CSS White Space At Bottom of Page
Strange space at bottom of page on iOS
current state of whitespace
It's your CSS on the .degree element, specifically the absolute positioning. For mobile, change the css to the following;
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
left: 0;
right: 0;
}
}
Or, even better, the following;
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
position: static;
}
}
Update
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
position: static;
}
.div.degree div.course{
width: auto;
max-width: 100%;
}
}
I am making an website and it works perfectly on pc but when I try to preview on phone I got some problems.
Can anyone help me?
I got everything inside an div with this properties.
width: 960px;
height: 500px;
margin-top: 50px;
margin-left: 312px;
clear: both;
position: relative;
top: -250px;
position: static
Since you're giving the elements static heights it won't change when you switch to mobile platforms. Like Adarsh Mohan said, use #media rules. You can define what lay-out you want per size of the screen. For example:
#media all and (max-width: 320px){
.content{height:250px; width:500px;}
}
This CSS will only be applied to the div 'content' when the width of the screen is 320px (or lower).
I have a website it has banner responsiveness issue on smaller devices. Also logo pulls towards right as well.
Website link.
#rev_slider_1_1949_wrapper
{
position: fixed;
z-index: 0;
max-width: 1200px !important
}
please do help me fix this bug. thanks in advance
Try giving your .container_24 element a width: 100% in the respective stylesheet (720.css).