I want to make a website where I'm using an "accordian" as my design for big screen devices (>750px) and I want to use a different design (Normal Buttons) for small devices.
I have studied how to apply diff css design for different screen size but don't know what to do if even my html content is different.
Can anyone please help me with how my html syntax should be for these two different contents ?
If you want different html what you can do is make 2 parts of content that are basicly the same but
#media screen and (min-width: 750px){
.smallClass{
display:none;
{
.bigClass{
display:block;
{
}
That way it switches between the blocks depending on your screen width
You can use media queries to adjust CSS rules to different screen sizes.
This is an example with a class named "testClass"
#media screen and (max-width: 650px){
.testClass{
color: blue;
{
}
Related
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;
}
}
How can i show a different logo when my website is viewed on a mobile device?
I know nothing about html for after some research i found that this can be done adding some ccs to my style.ccs.
Im working on Wordpress but i tryed different ways and no one worked for me. If anyone can help me with a code for my web im going to be very grateful :)
My web is camporecoleta.com.ar and i want to show the next logo when the page is loaded on a mobile device: http://camporecoleta.com.ar/wp-content/uploads/2017/12/Logo-1-1.png
I hope anyone can help me, sorry if i had any mistake, my main language is not english
Well there is probably a lot of ways to do it but one easy way would be plain old css with #media that will apply diffrent styling depending on the viewport.
Basicaly you could use a css background image on an element and when the screen gets to a specified size there is another css class with a diffrent image that is apply.
You could also just ajust the size of that same logo.
CSS #media rule
You can solve your issue with media queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
or
Try function wp_is_moible()
if ( wp_is_mobile() ) {
/* Display and echo mobile specific stuff here */
}
https://codex.wordpress.org/Function_Reference/wp_is_mobile
Try using CSS media queries like this:
#media only screen and (max-device-width : 640px)
{
/* style here apply for screen width up to 640px */
#logo
{
background-image: url('pathToImages/myMobileLogo.jpg');
}
}
#media only screen and (min-device-width : 640px)
{
/* style here apply for screen width above 640px*/
#logo
{
background-image: url('pathToImages/myBiggerImage.jpg');
}
}
I have created a responsive website using Swiper. I have used #media queries in my css to fit different screen size and orientation.
Initially, I have 1 main css, 1 landscape css and 1 vertical css. I imported two orientation css into main css. Only main css is in html file. The website works fine with all screen sizes. The css snippet regarding the media is as below:
#media screen and (orientation:landscape) and (min-width:700px) {
#media screen and (orientation:landscape) and (min-aspect-ratio:16/10) {
#media screen and (orientation:portrait)
Then I read about not using import for css so I cat all .css into one file. I also deleted the two #import lines. Then the website does not work properly. Specifically, all elements on small screens return to normal size. I checked the css structure: these elements lose their style enclosed in #media {} thus inherent from their parent css.
The fiddle with all the code is here. It's not working because it supposes to grab local image files.
The working website with separate css files is this. It's on Github so you can see the source files easily.
I am really new to css so this might be due a stupid mistake..
Use these media screen for tablet and mobile if you are not importing hopefully it will help Thank's
beside your fiddle shows this on top }//]]> i dont know why might be js issue or some text in body
#media only screen and (max-width: 1024px){}
#media only screen and (max-width: 768px){}
#media only screen and (max-width: 767px){}
I came across this while looking something up for media queries. always like learning new things and couldn't find anywhere on the net to explain this type of markup. this is from Expedia's responsive web design shown by litmus.
https://litmus.com/scope/z1xdodxbzane
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{width:100% !important; height:auto!important; line-height:normal!important;}
Basically
*[class="FlexWidth100"]
is just same with
.FlexWidth100
selector
* or called as wildcard in CSS. This is use for select all elements within the DOM.
So basically, your code will target all elements with class FlexWidth100 in the DOM and apply
{width:100% !important; height:auto!important; line-height:normal!important;}
when the screen's width is less than or equal to 600px
It's a css selector which targets all element on the .html page with the class .FlexWidth100.
This is a responsive cascading style sheet, that basically says the following in plain english:
#media only screen and (max-width: 600px) {
Target all screen media (laptop screen, desktop screens, smartphones and tablets
screens)
Then it says, if and only if the max width of the webpage is 600px, then apply
the following styles, such as {width:100% !important; height:auto!important;
line-height:normal!important;}
You can add any styles you want under there, such as:
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{color: green;}
This technique is generally used to target screens with different sizes; you might not want to write a single style sheet for every media type or screen size; you write one style sheet then, within that same style sheet, you specify different styles for different media types and screen sizes.
So, when I am looking at your website from a desktop, it looks one way, but when I look at the same website, from a mobile device for instance, it looks a different way.
Hope that helps also, try looking at Facebook from your desktop or laptop, then look at it on your mobile device and you'll see that it looks different.
Finally, to see if a site is using a responsive style sheet, look at it from a wide screen, like desktop, then hold one corner of the browser and slowly re-size the browser window to a smaller screen size, and you'll see different styles being applied to that webpage instantly only if that site is using a responsive style sheet.
Hope this helps mate!
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.