So I have an issue when the screen is a certain width my background photo disappears. It's weird because at full screen (desktop) it's fine and on mobile it's fine. It's kinda the in-between space like tablets or small desktop screens where the background photo leaves/disappears. (The site was written with "responsiveness" in mind.)
The code is quite extensive so it would probably be easier to visit the page in question and use "inspect" to see the code. Unfortunately, iv tried some solutions but they have not worked which means I have no clue what I am doing wrong! How can I get the photo to NOT disappear regardless of the browser/screen width?
See the page # Zoeaa.com
RECREATE ISSUE BY: Reducing the browser and at a certain point, and the background photo should disappear.
Would really appreciate the help! If there is anything I can do to improve this question, please let me know!
Photo of site working.
Photo of the site not working.
I reviewed your site and I think this is not actually background issue but height issue on the element which you applied this background image.
I found something like that:
#media only screen and (max-width: 1360px){
.px_slider, .px_slider .slides>li {
height: auto !important;
}
}
So when height: auto !important; the element I found height is 0 that's why background image not showing. So just check you media query break-points wheres you wrote same type of CSS.
See here:
And when showing:
Related
I'm trying to create a survey for a client. Everything good however when I visit the survey on mobile devices (small screen sizes) some of the survey is popping out of the screen which makes it unusable.
I tried to change the size of the survey with width but it doesnt change.
I've read that it might depends on inline, but still no change.
The Website (made with Wordpress):
https://survey.xs-sol.com/
Here's some pictures:
Everythings fine
Here's missing some survey
(this is 1 to 1 copy from mobile, so the cut is the issue)
What is it, that triggers the issue?
Problematic is the selectbox under "What is your working environment?" - the second option "Shop (Food, El..." is quite big, so on small screens where there is not enough space, scrollbar appears.
Add select { width: 100%; } to your styles to solve this issue.
juniorgoldreport.com is the website I'm working with. On regular desktop view its fine, when I shrink the window down smaller and smaller it seems to act responsive and it's progress. It is being made in wordpress.
When I view it on my smartphone, (LG G4), there is a huge white space to the right of the website and I cannot figure out why. I've been using inspect element via chrome to trouble shoot, but being on a cell phone I dont have that option so easily.
Does anyone have an idea?
Here's an image of the issue when you search the website on a mobile device:
Along with that too, if you guys easily know in my header my logo and my social media/subscribe button are really difficult to align center so its even on both side and they're aligned vertically.Any hints or ideas on this one? I'm much more concerned with the mobile issue though.
Looks to me like it's
.page { overflow: visible !important; }
in line 3308 that's causing the issue. Not sure what purpose that's serving, so you can take it out, but it might cause other issues.
Remove left: 50px; from .site-main .sidebar-container and the gap should disappear.
Ok,
So I have a Div which is set to 100% width via Css (width: 100%;). In web browsers it displays fine. On iPhones (both in Safari and Chrome) it hangs over the screens but quite a few pixels (couple hundred). When setting at 100% width Android phones seem to fit the div into the screen.
I basically just want my div to fit in whatever container its in, but i think for some reason the iFrame is stretching it on iOS.
I tried setting a fixed width to test (e.g. width: 10px;), which is reflected in the web browser, but in iOS it is always the same width... I tried playing around with the #media in CSS, but the width will not change.
I also tried adding the following meta tag:
and added a fixed with css and applied to the div... still did not change the width..
I tried removing the div, just having an iframe of 10px, which is reflected on my laptop, but in ios it is still extremely wide...
I will try provide some screenshots to show what I mean, you can also feel free to visit the page I am talking about, however, you may need to join up to test: http://www.ozesports.net.au/chat
Ive posted an album for the below images as I can only post 2 links at the moment:
http://imgur.com/a/q9wcM
Page on laptop (Google Chrome)
1st img
Page on iOS (Safari)
2nd img
Page on iOS with me pinch zooming out so you can see its hanging over (Safari)
3rd img
Page on Android
4th img
I am really stuck, let me know if you need me to clarify anything..
Thanks!
Try working with media queries
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
width: 100%;
}
I am creating a webpage with CSS and HTML and I stumbled upon an annoying issue. When I resize my browser window, the background color covers the part of the page that is out of view, on the right side. It sounds a little vague but luckily, I have found a webpage on which this occurs also, here. Dragging the browser window to the left or right of the screen (Win 7 and 8) will resize the page, and when you look at the off-screen part of the page, you can see that it's "covered" with the background color.
I have tried searching the web for a solution to this issue but I find it hard to come up with an effective search term. Hopefully someone here can help! Thanks in advance!
You need to add a "max-width" to the .container, like so (includes current code):
.container {
width: 1200px;
margin: 0px auto;
max-width: 100%; //this is the new line
}
(.container is found in default.css on line 212.)
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design