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');
}
}
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
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 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;
{
}
When I look at my site on a phone or simply narrow the browser window on my computer, the elements in the header and the links wind up going behind the main page image. Here's the link to the page: http://www.sleepfullnights.com/
How do I go about fixing the header on the Shopify page so that it compresses nicely? I think this is an issue that comes up on multiple pages so any general guidelines for building responsive pages is greatly appreciated.
#media queries is what you're looking for. With them, you can declare different styling to be applied to a page depending on the screen size.
An example of how you can use it:
/* apply code below on screens smaller than 1001px in width */
#media only screen and (max-width : 1000px) {
ul li { font-size:11px; }
}
can you put the css code for the header?
also you can give a try to bootstrap framwork, it's wery usefull for building responsive websites.
take a look: http://getbootstrap.com/
I am attempting to change to top margin on a div according to the browser width.. using one query along with the main css worked but when I added another set of screen widths/correlating styles they did not respond. What is the best way to have multiple device widths say if I wanted to have 4 or 5 different margin tops as the screen adjusts.
the code below is an example of what I tried and I am not too sure what I am doing wrong... All help is greatly appreciated.
#media screen and (min-width: 1px) and (max-width: 410px){
.inner-cont{margin-top:130px;}}
#media screen and (min-width:411px) and(max-width: 1000px){
.inner-cont{margin-top:50px;}}
I am new to this but am learning alot and am very appreciative to all on this site for all the help. Thanks alot guys!
You don't have a space here, and thus your media query fails
and(max-width: 1000px)
--^--
Demo (Resize the fiddle window to see the effect)
Also, am not having the markup, so if you are trying to apply margin-top:130px; on an inline element, it will simply fail, also, inheritance matters, order of the media query matters too, but as far as the question goes with the provided code, only issue I can see was the missing space..
you are missing only keyword but
your media-query works, see here
for eg
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
see examples here
see demo here (change browser width to understand)