I have the problem that when I view my site on mobile devices or if I manually resize my viewing window to a point where the text begins to wrap, the white area behind my text disappears. This whould not be a big problem in mormal circumstances but for me it's a problem because I have a dark background image and this makes it impossible to read the text once this happens. I tried to solve the problem by disabling responsiveness but this did not solve the problem.
Here is my the website: me-afrika.de
Does anyone have any ideas how I can overcome this problem? Thanks in advance.
The white background is being applied to the ".container" element only when the window is at least 1024px wide.
At smaller sizes it's trying to load a background image that doesn't exist (http://www.me-afrika.de/wp-content/themes/musicplus/images/content/main-n.png).
Related
This is my first attempt to make a webpage but something seems to go wrong with the mobile version of my page. On desktop everything is ok but on mobile, the right part of my header's background img is covered by the main background image.It is a little difficult to describe it so I 'm sending you the link for your better understanding http://rockittest.blogspot.gr/.
I tried to resize the images, to change position, I've read all relevant threads but I couldn't fix it. Do you have any ideas about what can be wrong?
Thank you in advance!
I'm working on adding bxslider to my Rails web project. I have it added sucessfully. However, what is annoying is that even after altering several CSS feautures, there is gray area at the bottom that does not go away. I've tried setting various heights to 100%, but does not work. I also tried eliminating any borders or padding, which still doesn't do the trick. Has anyone experienced the same issue or knows how to eradicate the gray body part so that images fit the entire height of the slider?
Thanks for the comments! I realized that in order to get rid of the grey area, I needed to adjust the height of the iframe itself, and not tamper too much with the CSS related to the images within the slider or any of its contents.
I'm having an issue with a background image with repeat-x property :S
On Windows OS, it seems working fine but not on Mac.
When I open the web, I see bunch of white space chopped off on the right side
and it corrects itself when resizing the size of the window :O
I think my method to set its width has a problem but cannot figure out exactly why.
http://www.sangminkim.com/sample/index.html
This is the url for the page.
Thanks in advance.
Issue: Background image doesn't display when starting from a small view and scrolling to the right.
This issue cannot be solved. If you inspect the HTML and BODY elements, the background stops where the elements stop. The HTML and BODY elements cannot be larger than the view port. This is a common issue and cannot be corrected (it even happens on the footer of StackOverflow).
I have some problem in CSS. Check this page. If you click "Barcelona" link in that page you can see the whole page shifting to 10 pixels right and come back to normal. Why its happening? Any help? Thanks
It shifts because of vertical scrollbar showing up. Also the image corresponding to "barcelona" shows in wrong place in firefox. Maybe the old images isn't removed before next one shows, and that forces it to be displayed below?
Apart from the image positioning, a good thing is have overflow-y:scroll set on html. It will force the scrollbar to be always visible (I know maybe not the nicest look) but in exchange the page won't be shifting when navigating to different pages (some may be long, and thus scrollbar shows, some not and have no scrollbar)
Image which is loaded when you click "Barcelona" is wider than it's container. You either reduce width of that image or make the image container a bit wider.
My page is white and the background image for links is mainly black. I need the link text to be white to be visible over the black background.
Ive set the text size in pixels, but if it was somehow resized then the text may not be visible over the page as its also white.
Is this OK? Generally zooming seems to be done by scaling the whole page not just resizing text. Also ive used px, which generally dont resize. If this isnt OK, how else can you have white link text over a dark background?
Thanks
Could you not just have dynamic sizes for the menu items ?
That way if the text is resized then so will the menu item in which it is contained.
if you use css and be sure to validate your markup using w3c the fallout should be minimal as most browsers will try and render standards compliant code reasonably well.
I'm sure you've seen this before:
http://validator.w3.org/
If nothing else it will at least look good or poor in everything rather than good in some and poor in all so that makes the issues a bit easy to pin down.
oh um ...
how would the text be resized anyway ?
To my knowledge unless you provide a different / optional style that can be added or removed text sizes are fixed, for example:
<div style="font-size:10px;"> test </div>
Assuming the page renders correctly that "test" div will always render the text at 10px ... if the user uses their browser to make the size bigger or smaller the entire div scales not just the text, this is the reason for standards ... makes that kind of problem where the text resizes and the div doesnt go away.
hope this helps :)