I have put together a site for a client using Cargo, a site builder. Overall it works well, but there is an issue on iPad. We have sections using background-size:cover which work great on smartphone and desktop but on iPad it breaks the site, removing all other background colours and replacing it with the bottom background image filling the screen.
I found the code that seems to be controlling the background-cover sizing
<div data-backdrop="wallpaper" class="backdrop" data-view="Backdrop" data-id="30001173">
<script type="text/json" data-set="backdrop_data">{"id":5115408,"site_id":316283,"page_id":30001173,"backdrop_id":3,"backdrop_path":"wallpaper","is_active":true,"data":{"scale_option":"cover","repeat_image":false,"image_alignment":"image_center_center","margin":0,"pattern_size":100,"limit_size":false,"overlay_color":"rgba(0, 0, 0, 0)","bg_color":"transparent","cycle_images":false,"autoplay":true,"slideshow_transition":"slide","transition_timeout":2.5,"transition_duration":1,"randomize":false,"arrow_navigation":false,"focus_object":"{}","backdrop_viewport_lock":true,"use_image_focus":"false","image":"167094523","requires_webgl":"false"}}</script>
</div>
The site builder allows custom CSS and HTML, I was hoping I could add a media query for tablets and overwrite the background-size there. But even when I try to overwrite the 'backdrop' class it doesn't seem to change the background size.
Any ideas?
Targeting the 'backdrop' class did not overwrite the CSS unfortunately. I wan't a way to force the background-size for the desired element.
Related
I have a background image and I am trying to remove the background image for small screens. I am using tailwind css with react.
I know there is a lot of question but that doesn't fit for my requirements.
As i had complex background of multiple SVGs for that reason i created the class in index.css previse is here
and then i used it in react component as follows:
This work fine but now i want to remove the image for small and i don't now how to do it that is why i am postin question here.
As tailwind-css uses mobile-first breakpoint system, you need to specify bg-pattern class to only large-screen sizes like :md, :lg,:xl
So change your div to:
<div className={`md:bg-pattern ...`}
So now your bg-pattern class is applied to only screen sizes of :md and above.
On my site, the logo is up to search block when I try to view the site from tablets and phones, but from a PC it is OK. I included a photo to show you what I mean. Can anyone help me fix this?
As look from tablets and phones:
This is happening because your image width and height are predefined. This means that no matter what device you're on, the image will keep to the defined width/height.
You will need to make your image responsive.
You can do this by wrapping the image in a div that's got a defined width/height (perhaps a bootstrap grid column) and then apply Bootstrap's `.img-responsive' class on your image.
I'd provide a code example once you post your code & the position of where the image needs to be. (see comments on your main thread)
Try add .img-responsive class to the tag in your theme files.
I am building a site for my friend, He specified a bug for me. He said,"When I Zoom in/out the browser, the Website layout “breaks apart” but it is working fine in 100% Browser Zoom."
Please let me know the Standard for web development for Browser Zooming
In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units
usually I don't consider zooming but if you want a good website that shows ok with different screen resolutions like in mobile browsers or tablet you'd better use responsive style sheets.
you do not need to write it by your own. you can use style sheets like twitter bootstrap which already supports responsive web pages
you can download it from here enter link description here
The webpage should be responsive enough like to work for "smaller screens" that is more or less how it will work for your CSS when they zoom in.
Make sure you have min-width or min-height set to your body or general container so, when it gets to this minimums it just stais as it looks.
For example, for the SO webpage, you have the div with id "content" inside the general div.container that has a width of 980px, so if you zoom in a lot it just shows the bottom scrollbar.
I have seen the option of loading different css files[called responsive web designing] for different screen sizes. But I want to know if there is some other way through which I can keep the CSS uniform.
I have to adjust the width of a title bar that should be of the same size as browser window with some margin-right
<toolbar width="some px value" margin-right="some px value">
I need some spacing at the end of the browser screen
Can I somehow get the current width of the browser screen and thus adjust my titlebar accordingly
"toolbar" defaults to being displayed as "inline". Try using "block". See this fiddle.
But I don't think "toolbar" is a valid html tag-name (I might be wrong). In any case old versions of Internet Explorer have a hard time figuring out what to do with certain tags (like most new semantic html5 tags) and won't apply any css to them.
If you feel the need to use new semantic tags and still need legacy browser support I recomend using Modernizr. Including it at the top of your page will use a small browser hack to get support for these tags even in old browsers.
I'm wondering if this is something somewhat simple, but I'm having a problem ONLY on iPad with my sprited images. I have an tag that I use a sprite for to display an image of a star (similar to gmail or picasa) to indicate a favorite. On every other browser (including safari) on a computer, it's all completely fine.
The problem is on an iPad, it's showing more of the sprite than it should and it looks strange. What's even stranger is that this image is repeated several times and it doesn't seem to happen consistently.
Is this some sort of zoom issue or viewport setting problem specifically for iPad? It's driving me crazy, and anything I do to fix it cuts off some of the image and ruins the normal browser look.
Here's an example of what I mean since I can't put up the page I'm currently working on.
On this site I've worked on in the past, the viewing options look strange on an iPad:
http://demo.qlikview.com/index.aspx?section=Life
For example the "Download" viewing option looks different on the FEMA app than on the Kick It app so it doesn't even appear to be consistent.
Any help would be appreciated.
Thanks!
This is because the iPad scales your page.
The size of your element where the sprite is used is scaled and the sprite image to. But it seems not to behave precisely.
The same thing happens when you zoom out in safari. This is because an image is not scaled the same way in the browser then a dom element. A dom element is rendered as vector object. So when you zoom in or out, the lines keep sharp. When you do the same with a bitmap. It gets blurry and the browser need to guess how the image would look like smaller or bigger.
You have two options:
use more space between the sprites.
use EMs and not Pixels in your CSS
PS: Don't use !important in your css
Like meo pointed out, best option would be to leave space between the sprites.
There is also one last thing you can do, which is not to let the user zoom the web page by putting the following line in your tag. It would look the exact same as you view in the browser, which is pretty neat if you have loads of elements messed up in the iPad because of the sprite issue.
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />
Good luck!
The simplest fix for this is to put an outline around your spite with the border color the same as the parent container's background color. The outline is outside you element and does not effect layout. What you see is a problem mobile Webkit has when it scales down images with background color or background images, they bleed out of their container. The outline will sit on top of that and cover it.
What I usually do is just define separate images (non-sprited) for iPad users. I know it doesn't load as quickly as you're hoping for with sprited images, but I feel it's a price they have to pay. What I do is have individual images on the server with #media in your stylesheet to define different images for iPad browsers. A quick review of how to use #media for iPad can be found at:
http://css-tricks.com/snippets/css/ipad-specific-css/
I just ran into this problem as well. I've been leaving extra space between my sprites since I first noticed the iPad imperfections. However, my current project involved sprites and another element with CSS3 transforms. The combination made the sprites blurry, with strange clipping around the edges. I actually found a fix over at No more jagged edges in iOS. Try applying the following CSS to your sprites:
/* IOS fix for incorrectly scaled sprites */
-webkit-background-clip:padding-box;
background-clip:padding-box;
Those few lines worked magic in my project. Of course, YMMV.