I am unable to make this HTML Form responsive. It looks fine on desktops but not on mobiles and tablets.
Here is the link to the code:
JSFiddle
I have tried removing body's overflow: hidden and white-space: nowrap; and using different types of col but it does not work. I think my stack class and padding in some places is causing the problem but I am unable to fix it.
It seems like you're making forms just with HTML. Maybe try to use bootstrap form https://getbootstrap.com/docs/4.0/components/forms/ . It will be easier to make forms responsive.
CSS media queries are the basis of responsive web design. Try something like:
div {
height: 200px;
width: 400px;
outline: 1px solid black;
}
#media screen and (max-width: 767px) {
div {
width: 100px;
}
}
<div>
Hello World
</div>
Related
I have the following simple HTML and CSS code with media queries which you can also find in the JSfiddle here:
/* Screenwidth as variable */
:root {
--min-width: 1041px;
}
/* homepage */
#media screen and (min-width:1041px){
.homepage {
height: 500px;
width: 400px;
}
}
#media screen and (max-width:1040px){
.homepage {
height: 300px;
width: 100px;
}
}
/* faq */
#media screen and (min-width:1041px){
.faq {
height: 800px;
width: 600px;
}
}
#media screen and (max-width:1040px){
.faq {
height: 700px;
width: 550px;
}
}
<div class="homepage">
Here goes content of homepage.
</div>
<div class="faq">
Here goes content of faq.
</div>
As you can see in the code I will have different pages on my website and they should have a different size depending on the device that is accessing the website. The media queries itself work perfectly already.
However, since I will have a lot of those media queries within in my CSS and I might want to change them to different sizes to test and try things it would be great to have the min-width and the max-width as variable within the :root part of the CSS.
Do you know if this is even possible and if yes how I have to change my code to make it work?
No, you can't use the css native variables in media query.
The :root, that is the element is a top-level parent. The other child elements can inherit from the root but the media query is not an element,
This can't be done through css.
you can use preprocessors like sass to accomplish this.
I'm a newbie when it comes to coding (this is my first website) but I'm trying to modify the logo on my website. I would like to make it bigger and central. I am able to achieve this from the desktop view but it doesn't work on the mobile.
Briefly, the logo looks quite small on both devices, desktop and smartphone. So I add this code in Custom CSS (found on the web...):
.logo.logo1 {
width:100%;
text-align:center;
margin-bottom:20px;
}
.logo.logo1 {
width: 400px;
height: 100px;
}
.logo.logo1 {
position: relative;
top: 40px;
right: 130px;
}
With this in place, on my desktop the logo looks nice but on my smartphone it is small and goes too far to the very left of the screen, partially disappearing.
As I'm now approaching to coding, I have no idea whether it depends on a potential logo container or how to make it responsive on the smartphone. Truth is that the more research I do, the more I get confused.
Any help about how to fix this would be very appreciated :)
P.S. the website is this one
Gio
Add this to your css at the bottom.
#media (max-width: 767px){
.logo.logo1{
max-width: 100%;
width: 100%;
position: static;
top: 0;
right: 0;
height: auto;
}
}
Basically, what's going on here is that you are overriding a bunch of styles that your theme applies that make it tiny on small devices.
you should change css in media section for mobile view. use somethings like below :
#media (max-width: 767px){
/*
your css tags
*/
}
special in this issue you should change style-mb.css file in line 3048 and change your logo size
note: you can use mobile view in your browser to test mobile view in your desktop browser in developer tools
So here is the removed link
It is in russian but it doesn't matter.
The thing is that bootstrap grid sometimes gets broken and I don't know why. Some times it looks normal but then I zoom page to 75% and it brokes.
I gueess it also brokes on different laptops screens without zooming.
Should I provide you some code or something else?
You can add a CSS clear "reset" every 4 items like this. This will work without setting a specific height.
#media (min-width: 992px) {
.category-wrap:nth-child(4n+1) {
clear: left;
}
}
http://codeply.com/go/ubs5zGee5g
Add height: 150px; to ur .category-wrap to fix it.
.category-wrap {
margin-top: 15px;
height: 150px;
}
I've a question, I'm trying to structure a site so that when it is in desktop mode a particular div which contains an img element is set to display:none;
When the screen size gets to 450px or less I would like to set the div to display:block and show it.
However, I'm having an issue doing so as the display:block never get's applied. I can do the reverese (display:block to display:none) . I'm guessing my issue is that I'm trying to apply a style to an element which does not exist on the page, if that is the case is there a way I can hide it, so that it takes up no space and show it when the screen is less than 450px?
Any help is much appreciated.
This is my CSS
#toplogo{
display: none;
margin-left: auto;
margin-right: auto;
}
This is my Media Query
#media screen and (max-width: 450px){
#toplogo{
display: block;
}
}
This is the HTML
<div id="toplogo">
<img src="/images/myimage.png"/>
</div>
Any help is much appreciated.
Your code seems just fine right now.
But I'd suggest mobile first approach, so the global style is aimed at mobile devices and later altered for bigger screens. Be sure to check what are you altering with your css media queries and check your code order so you are not overwriting media queries with your styling later in the 'global' css code
This snippet below wont work as intended if my media query will be placed at the top of css file, as it will be later overwritten - example of badly organized css media query
Working example
/* mobile first approach */
#toplogo {
display: block;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
.hey {
display: none
}
#media screen and (min-width: 450px){
/* hide block when window width is at least 450px */
#toplogo {
display: none;
}
.hey {
display: block
}
}
<div id="toplogo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
</div>
<div class="hey">Hey, I'm bigger than 450px!</div>
http://jsfiddle.net/gfuunyak/4/
No need to apply any js.
Your css & media query are perfectly written; It works in my end; if not work in your end; then just add !important after display: block;
I'm attempting to make the twitter embed widget responsive, to do this I need to make the height a percentage. As it stands I am using the default twitter embed from here
That says I can set the height in advanced customization, however that is only for pixels.
Here is my code;
HTML:
<div id="body-twitterFeed">
<a class="twitter-timeline" href="https://twitter.com/ARavinMadMonkey" data-widget-id="347000705833398272" height="700" data-chrome="noscrollbar transparent" border-color="#DBDBDB">Tweets by #ARavinMadMonkey</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
CSS:
#body-twitterFeed{
height: 80%;
padding: 5px 10px 5px 10px;
overflow: hide;
}
I attempted to use overflow:hide; to hide anything outside of the body-twitterFeed div, but it just simply doesn't work.
If anyone could help me work out a way to make the height of the twitter feed responsive, it would help a lot!
Thanks in advance.
PS. I am not using bootstrap or anything.
You need to set the height of the class .twitterTimeline.
Theoretically this should be easy: just set it as a proportion of the window height (e.g., 40vh). Trouble is that mobile Safari has trouble rendering vh properly.
Instead, I think you need to use media queries to set the height, as in the following example:
#media screen and (max-height: 30rem) {
.twitter-timeline {
height: 15rem;
}
}
#media screen and (min-height: 30rem) {
.twitter-timeline {
height: 30rem;
}
}
If you want to see more about media queries and what all they can do, try reading this.