I am working on a site at http://nissidesign.com/FeedMySheep/ and I put it there while I am working on it. This is a twitter bootstrap site, and my question is I am trying to put the logo on the top left corner. I can do that, but when I reduce the screen size the logo is not playing well. Is there a way to hide the logo for mobile or other small screens? I have searched and all the suggestions people had to hide it on small screens do not work.
If you add this to your css, it will hide an element with id your-logo on screen sizes less than 600px.
#media only screen and (max-width: 600px) {
#your-logo {
display: none;
}
}
So you can just change the id to your actual logo element id and to the maximum screen size you want to display the logo.
Related
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 am working on a website which I coded from scratch.
I am using the following to help me insert captions on to my carousel slides which is working quite well:
Adding text over an image in Bootstrap carousel
Everything is responsive. The only issue is that when I minimize the page to mobile size the captions appear on top of the slides. Is there any way to make them disappear once the page reaches a certain size?
Thank you!
You can use a css media query.
Just add a style rule to your css files, for example something like:
#media only screen and (max-width: 500px) {
.caption {
display: hidden;
}
}
For max-width you can of course use any pixel value you like. All styles inside of the media query are only applied if the condition is met, so in this case, if the screen width is 500px or less.
I'm designing a webpage, and extracted this portion into a fiddle:
https://jsfiddle.net/h703xqbt/16/
I'm not being able to avoid several layers of tags instead of a single line when the screen resizes to a smaller value or when using a movile device.
I'm trying to make it collapse into a single button that shows a dropdown list with all the tags that don't fit the screen.
I'm familiar with media queries such as
#media (max-width: 600px) {
#button1 {
display: none;
}
}
but i'm not sure how to use it for this purpose.
I've seen some webpages that do this but it becomes very difficult to follow them as they have an enormous amount of details, and can't find the fundamentals.
Is this possible using only css? (i'm trying to avoid js and jquery as much as possible, for my own reasons)
Simply give the tabs a width of 100% when the screen size is a certain width :)
#media (max-width: 600px) {
.tab-link {
width: 100%;
}
}
This way, the tabs will stay next to each other on wide screens, and occupy the full width on mobile devices, stacking on top of each other.
You can always change the 600px media query to a smaller / larger width, and give the tabs themselves a width of something like 50% if you would like two tabs next to each other.
I've created a new fiddle showcasing this here.
Hope this helps! :)
To put it simply, when decreasing the size of your browser window, for mobile device view, the top buttons get pushed to the left, underneath the clients name and finally ends up in a Menu subfolder. Not being a web designer, although I am trying hard to learn, what I would like to see is the Menu subfolder react a lot sooner, before the button end up under the clients name. Being a free template of which I am trying to redesign, I looked under style.css and responsive.css but I'm not sure what I should be looking for. Any help with this matter would be very much appreciated.
http://landonmusicgroup.com/victoria_update_test/index.html
Thank you!
I would suggest smaller icons in general with less padding on the left and ride sides. This will create smaller icons that are closer together. You would likely have to scale the browser to ensure that the icons all fit before the media queries break to a single menu button at 767px.
The more efficient option would be to adjust the icons size and the logo size depending on the media query. For example, you have a media query in that template from around 980px to 1300px. If possible, in your template adjust the logo sizing and icon sizing to make sure that within that range, everything fits.
If you like the bigger icons, that is okay, you just must make sure that the bigger sized icons and logo do not take effect until after the window is over 1300px. Anything between 980px and 1300px is going to require smaller icons, smaller logotype, or a new arrangement altogether to avoid the line break.
Media queries are used like so:
//This section affects anything bigger than 480px
#media screen and (min-width: 480px) {
body {
//insert width and height
}
}
//This section affects anything bigger than 767px
#media screen and (min-width: 767px) {
li {
//insert width and height
}
}
//This section affects anything bigger than 980px
#media screen and (min-width: 980px) {
li {
//insert width and height
}
}
//This section affects anything bigger than 1300px
#media screen and (min-width: 1300px) {
li {
//insert width and height
}
}
I am trying to develop a website using bootstrap framework. I've successfully made a responsive carousel, which works fine. But when I change the size of browser to mobile screen the caption covers the image or covers most of the part of image. Although I'm beginner in CSS for mobile devices.Can anyone tell me how to reduce the size of caption text on mobile or tablet devices. Any help regarding this would be appreciated. I can't put the whole code here because it is quite big. So I'm posting the link to my website.
Here is the link to my site: link
You should read up on Media Queries. With Media Queries you can set specific styles for different window sizes and also for specific devices.
Let's say that you want to change the font-size of a CSS-rule when the width of the window is bigger than 320px and smaller than 400px. Then you can use a code snippet like this:
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
.yourclass{font-size: 14px;}
}