So I'm having trouble getting my div to resize based on if it's a mobile (specifically smartphone) device. Now the mobile device I'm using is the iPhone7plus. So I'm not sure if the dimensions I have are for this device.
my original css (for desktop) is this:
div#allContent div#mainContent div#contentText {
width:50%;
/*other styles*/
}
So the text on the screen is on one half of the page and the signup form will be on the other half. Now when I view in my iPhone the drop down items from the form are too big and I can't see the text inside the drop down boxes. So I'm trying to get the width of the contentText div to be 100% then also the form div to be 100%.
I added this to the bottom of my css file
I've tried this first line to:
/*#media only screen and (min-device-width:320px) and (max-device-width:480px) {
#media screen and (min-device-width:320px) and (max-device-width:480px) {
div#allContent div#mainContent div#contentText {
width:100%;
}
div#allContent div#mainContent div#signupContent {
width:100%;
}
}
Is it because I have a larger mobile device that it's not working? Should i increase the max values? I'm just learning mobile device support.
Mobile device max-width can be 767 after that i pad and notepad device width starts.
#media screen and (min-device-width:320px) and (max-device-width:767px) {
//code comes here
}
I think the media query syntax is different in your code
#media screen and (max-width: 480px){
}
I hope this media query will work for iphone portrait mode.
Maybe your problem is a syntax or you are not selecting the target correctly, if you post your full code (HTML and CSS) we could be more helpful.
Regardless, you could use min-width and max-width instead of *-device-width.
I have created example on CodePen, check it out it will help you.
Related
I'm working on a simple webpage where the artwork of an album has the tracklist beside it, the problem is that it's not very responsive and doesn't really work on mobile. The desktop version is fine, what i have in mind tho, is that on mobile, the artwork would have the tracklist under it.
help would be much appreciated.
You can use #media rule to include a block of CSS properties only if a certain condition is true. For example, if the browser window is 600px or smaller, the background color will be lightblue:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Here is a documentation
My Website Link.
My problem is,
Latest News section in my website(above footer), is not displayed properly in the mobile view.
The contents are very small, very difficult for the user to read it.
Can anyone suggest me any method or some correction in CSS, so that the contents are clearly visible.
Thank you.
Place this after the camera.css is initialized.
#media screen and (max-width: 480px){
#camera_wrap_448 .camera_caption > div div.camera_caption_desc {
font-size:3em !important;
}
}
Try to use VW instead of PX on both your height and font-size.
I also notice that there is a responsive problem in your "Product Portfolio when on 1199px upto 481px screen viewport.
I'm trying to hide a image in my website for all the mobile devices. This is a html based website.
http://www.onefourbase.com/
I've tried few ways, but no help. Can you guys please help me to get it to the work?
<div class="choseImg">
<img src="images/chose.png" alt="">
</div>
Have you tried media queries and hide image? Please mention what have you tried.
You can try below:
#media
only screen and (max-width: 767px) {
.choseImg{
display:none;
}
}
Best way is to apply media queries to the images you want hidden on the mobile devices. One way to do that would be
#media screen and (max-width:your-value-here){
img{display:none}
}
In place of 'your-value-here' type a width of a screen you want to place a breakpoint for your media queries in pixels. Also i suggest using classes or ids instead of 'img' tak to select the images.
You need to use media queries, the code in media queries is applied depending on some charactristics of the device :
#media mediatype and (expressions) {
CSS-Code;
}
In media type you can add screen to determine the size of the screen
In expression you precise the min-width: for which this applies
And in CSS-code you fill in the code that applies only if the screen is smaller than a number of pixels here display: none for the image.
You can do this using media queries.
First, add a class/id to the div that contains the images or to the image itself.
#media only screen and (max-width:767px){
.choseImg img{
display:none;
}
}
i want prevent show my website in small screens same as mobile or tablet...
and i want to show message in this screen that open my site in large screen
How can I do this?
Set width and height using media queries like this
#media screen and (max-width:360px) and (max-height:520px){
body{
display:none
}
}
pen is here with resizable window
Use media queries:
//the css inside this block will only be applied to devices with less than 800px width
#media (max-width: 800px) {
//add css here to show the message to open the webpage on a device with a larger screen
}
You can learn more about media queries here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
As you have tagged wordpress: You can add custom css where you can configure your themes.
I'm currently working on a website where I need to put some images and some heading and description will be going along with it. If the browser is full screen, the heading appears on a single line; however, if the browser width is decreased, the heading automatically appears on two lines.
Here's how it looks when the browser is full screen:
Here's how it looks when the browser width is decreased:
I want to make it so that the size of the heading is decreased when the browser width is decreased and was wondering how I could do it. I wasn't able to find any good resource on Google or I might just not be searching with the right keywords.
I'm developing the website using Ruby on Rails with Bootstrap (2.3.2). I'm also using SASS and jQuery, but I'm new to it.
You can do it with css #media operator:
h1 {
font-size: 30px;
}
#media screen and (max-device-width : 400px)
{
h1
{
font-size:20px;
}
}
#media screen and (min-device-width : 600px)
{
h1, div, etc
{
/* any css rules */
}
}
Also check useful resources: auto resize text (font size) when resizing window?
http://alistapart.com/article/responsive-web-design
http://www.w3.org/TR/css3-mediaqueries/
Bootstraps use css media queries to do that.
Here is the documentation from bootstrap: http://getbootstrap.com/css/#grid-media-queries
And here's a crash course in media queries: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/
To achieve what you want, you need to write something like this in your application.css.scss:
#media (min-width: #screen-md) {
h1{font-size: 14px}
}
"h1" should be replaced for the tag of the heading
you should check you're targeting to the correct min-width.