I've a problem in select box in Iphone. Because there is a lot of white space. I need to reduce the height and if I change the height it will change in other mobile browser too, so I need the solution for Iphone only.
#media queries of Css can Be Implemented.
Related
So I built this Wordpress page using WPBakery page builder and added a Pardot form to it. On certain browser sizes the form - which looks like it is an iframe element - is larger than the container it's in, so it adds scrollbars to compensate. Is there a recommended solution to keep this from happening? See attached image:
Picture of Pardot form forcing scrollbars
If you're not entirely sure if the form is an iframe element, you could try targeting the form's fields using CSS and using dynamic width and height values such as width: 100%; instead of something like width: 250px;, which will automatically resize your elements to fit the available width. This will take care of the horizontal scrollbar.
For the vertical scrollbar, you could try targeting the scrollbar with psuedo properties to manipulate it's style or hide it altogether. You can read more about it here:
https://css-tricks.com/almanac/properties/s/scrollbar/
It's worth noting though, that this approach isn't highly recommended, due to it's limited support across different browsers and platforms.
However, in the case of this specific vertical scrollbar, it appears to be a height or padding issue on the form's container, so you could target that with #media queries to make it more responsive across devices.
I hope this helps!
The best you can do, is in Pardot, create custom CSS - in Pardot - to accommodate smaller screen sizes.
The biggest issue with this is that the screen size is iframe dependent and not actual browser window width that it's embedded in.
So if you put the iframe into a container that is 600px wide on desktop, that would be a media query of #media (min-width: 600px) in Pardot. You need to adjust the media query for the container size.
If you don't have access to Pardot's CSS tools, you're mostly out of luck.
Ok. Here is the thing. Like we can use width:100% of an element and it'll take the full width of its container. How can we do that in case of fonts?
I have tried using 100% or em etc but that's not working.
Let me explain the actual problem. Here are three versions of a div. Please see the images.
1- Desktop
2- Android
3- iPhone
You can see that the text "Quote and Buy Online" is in the same line for Desktop and Android (which is the requirement) while it is in two lines in iPhone. Whereas the font-size is the same for all three. Now, that's the problem.
One way is that I reduce the size of the font until the problem gets solved for iPhone but it would then be much smaller for Desktop and Android.
If somehow, I tell the font to adjust its size according to its containing div then the problem will be solved.
Please note that I have checked the solution here but It says it won't be dynamic. So looking for a better alternative.
Here is the link where you can find the form.
This is not possible with pure CSS. You have 4 options:
1) Define the font size for certain breakpoints, to fill up as much as the container as possible, cross browser/platform.
2) Use Viewport Percentage Units: vw as described in this SO answer
3) Use a JS library to fill the text of the parent container, eg:
BigText
FitText
4) Apply a font size that fits the container well, maybe tweak it after 600px +; and live with the fact the font won't fit exactly 100% of the container.
I recommend no.4 for your specific requirment - there will be no JS dependancy, it's simplest to apply and it won't make that much of a difference for your requirement. Maybe the form would look better if you align the text to the left as well. I think no1 and 2 are a bit of an overkill.
You may want to look at using media queries to hit this across the device spectrum. One for iPhone portrait is below, but you will likely have a few to align for all devices.
#media screen and (max-width: 320px) {
.selector { font-size: 10px; }
}
.selector = your class or id of the button or any other html selector or tag.
I personally would go with a screen based fixed figure as you know it is going to render exactly over a scaling method. my 2c worth.
Further Reading: http://css-tricks.com/css-media-queries/
This is a tricky one. I have built a website using bootstrap and its brilliant. Brilliant for mobile/tablets. When it comes to desktop that's where the problem kicks in.
When the browser size is eg. 1000px (width of the body) then the site looks how it should. When the browser window is resized and is smaller, once it passes the sizes for tablet eg767px then the layout changes to make everything responsive.
Is there a way to keep the layout of the website exactly the same no matter what the window size, whilst being able to use bootstraps grid system?
Did you try the new grid options?
Especially .col-xs-* should help you.
Here is a little example from the docs.
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
You can use the media query #media handheld which is, theoretically, used only by handheld devies (phones and tablets).
See http://www.w3.org/TR/CSS2/media.html
If that doesn't work (because the phones aren't cooperating), you can substitute things like max-device-width for max-width, because browsers on phones are usually displayed full screen.
Of course there are always tablets that have the same screen size as a desktop monitor and that use windowed browsers like a desktop computer, but for those machines, do you still want to treat them differently than desktop computers?
As mentioned by #tim-bartsch the xs (extra small) grid class col-xs-* will act the same on every screen size. This will be describe in more detail at http://getbootstrap.com/getting-started/#disable-responsive.
If your layout also use a Navbar the above maybe don't help you. The instruction for this seems a little cryptic:
If using navbars, remove all navbar collapsing and expanding behavior.
In this case you could also try: https://github.com/bassjobsen/non-responsive-tb3
I have a aparently an easy problem with the width of my container when accesing in mobile devices or small screens
I spent 3 hours wonder why but...I can´t find the way
this is the url >> http://goo.gl/ZlLn3
You can see how the header, the content and the footer are beign limited when accesed by ipad/iphone or you resize the browser in desktop...i don´t need to go responsive, I only want the design shows full in every device !
Try to use CSS media query
Target iPhone and iPad with CSS3 Media Queries
Media Queries for Standard Devices
It is caused by your combination of width: 100% and overflow: hidden.
The elements are not wider then the browser viewport (100%), and from they they overflow and you hide them ;)
in my page using jquery mobile I have a div and I would fixed the width without it depends to the devices where it is showed.for example in my iphone the div is showed correctly because the screen is small while in my ipad the div takes all the screen and it is really bad...how can I fixed its position?
<div style='width: 100px'></div>
This is just general but you want to look at CSS 3 media queries to customize your layout specific to a device.