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.
Related
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');
}
}
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.
I am creating a webpage using only CSS & HTML
Everything looks fine until I zoom in. Once I zoom in the letters start to flow out of the div.
How do I fix this ?
Your problem has to do with responsive webdesign. By default people create there website for there own screens. But not everyone has the same screen resolution or viewport etc as you have.
The solution:
Media queries:
With media queries you can alter you css code when the user has a different resolution/viewport or is resizing there screen.
#media (max-width: 979px) {
.h2 {
font-size: 10px;
}
}
This will change the font of a the h2 tag to 10px when the screen width of the user is smaller then 979px. I will provide you with a link to a w3Schools page so you can see what kind of attributes the #media rule has.
Media queries w3cschools
tip:
You can see your resolution by opening the chrome developer tools and resizing your browser.(left top corner)
If you have any future questions please let me know I will explain some more about media queries.
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;
{
}
I know how to edit css on media queries, but how do I make it so that when the screen is less than 500px, certain html tags aren't even there? Thanks
You can't. They will always be part of the DOM (at least until you start adding JavaScript into the mix).
The closest you can come would be to write a style that sets them to display: none so they won't be rendered.
Below 500px screen size, you can hide the html tags you want.
#media screen and (max-width: 500px) {
p {
display:none;
}
}