High all.
I have a site that works ok on MOST devices.
However, I'm having a problem with resizing when the screen is for an iPhone 13 mini.
I have the screen size set at 650X1315.
All is fine until the phone is in horizontal. At this point my css fails to do anything.
I have:
#media screen and (max-width: 650px) and (orientation:landscape)
I've tried changing lots of properties, but neither the div form will increase to contain the textarea, or will the textarea reduce to stay within the form div.
I've tried MANY css rules but nothing works for me in
#media screen and (max-width: 650px) and (orientation:landscape)
Everything else works with width fit-content
Can anyone suggest anything please?
I've included an image to show this.
try to add text-area: max-width:80%
also try to use other simulation's tools for iPhone
may it has bug
Related
I have an owl carousel with cards in my project. It's my first time using it. I've set up to be one card in viewport while screen is small but the arrows are still too big and not fitting the screen nicely. Is there any possibility to change that? sorry for asking but as I wrote earlier I'm just learning all the web dev stuff.
check if this thing is in your css.. reducing the font size would change the size of the arrows
.owl-nav i {
font-size: 52px;
}
I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
The container class is used to restrict content to 70% of screen width. Works wonderfully for our app on medium and larger containers.
Unfortunately, we then want 100% spacing on small. Anyone have ideas?
In my code I just do something like this
#media screen and (max-width: the size you need)
.container
width: 98%
I just call this after importing the materializecss sass and override the default behavior
Here is the code they use and which you have to override: link
The WP responsive theme I'm working on:
http://www.wpexplorer.me/tetris/
I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will see that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.
I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it's all out of whack. I can't get the sticky header for this theme to function or do right. Oh, I've also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don't give me issues.
Adding the width: ; code to the #main-content doesn't seem to help either (which I read somewhere online that this was where the width code goes).
Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?
Thanks.
This should work
#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}
The position is fixed at the top using 0 with a z-index:999 you then need to set the width of the inner container pre-header 960px to match the rest.
You will need to setup the media queries for the other sizes you have setup. Easy, and Enjoy.
If you want the menu itself and not the social icons to become the top fixed bar without the social icons then you want to make a jquery scroll CSS change so that the #header becomes the fixed position.
It working with fixed header and social:
An illustration of it working without the social bar using a Jquery Scroll CSS change:
This is the way I would do it, I would move the menu down, and add the social icons to the menu itself. (Below is a screenshot of what I mean, the social icons are reduced to 75%)
PS. The social icons stand out to much so I would add a CSS3 Greyscale, and when the visitor hovers over them it turns on the color with a transition effect.
Hope this helps ;)
I've got following media-queries rules:
#media only screen and (max-width: 854px), only screen and
(max-device-width: 854px) (for devices <= 854px)
#media only screen and (min-width: 855px), only screen and
(min-device-width: 855px) (for devices > 854px)
It's strange but Chrome (and may be other browsers) use this rules at the same time (when width is 800px for example) (check screen). What's wrong?
They are falling back to the same rule because you are using device-width, the condition for device-width targets your device's physical width so if that condition is satisfied then that's the only rule that will be applied (regardless if you resize your browser to any width). Remove both the device-width conditions from your media queries, this should solve your issue.
To learn more about the difference between device-width and width, refer to this link: http://www.w3.org/TR/css3-mediaqueries/#media1
Thank you, Suvi.
I was testing media-query rules by changing width of browser (not by changing screen resolution). Because my browser width was less then 854px following rule was applied - #media only screen and (max-width: 854px). Because my screen resolution was more then 854px following rule was applied - only screen and (min-device-width: 855px)