I have an element that is attached to the bottom of the screen correctly. using bottom: 0
however, when I move into mobile view I still want it roughly the same height but I want to be able to scroll down to view the rest of the element, almost feels like I need to remove the bottom attribute
I'm using media queries but not sure how to get the desired effect I want. coz if I remove bottom from the media query, it will just carry on applying it
any ideas?
Use media-query:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
See here sizes:https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
#media only screen and (max-width: 768px) {
yourElement {
bottom: unset;
}
}
Related
First of all thanks to anyone who responds. I'm sure this is a no brainer for a CSS wizard but for me it's definitely not something I have experience with, hence the question.
On my website I've got all of a sudden a horizontal scroll appearing on mobile (which was NOT there before and no CSS was edited for that).
In addition to checking on my phone, I also check via an emulator# http://mobiletest.me/ (seems like it's there on tablets too). Does anyone know how to fix this?
Not sure if it's some WP plugin or theme working weirdly with the newer version of WP, but basically here's the CSS file's contents (it's pretty big).
https://justpaste.it/8v9yy (should be easily searchable & readable). I wanted to put it here but there's not enough space.
Thanks!
While there may be other issues causing that problem, such as elements extending beyond the body, you can solve the problem by hiding overflowing elements.
body, html {
overflow-x: hidden;
max-width: 100%;
}
Note: If elements within the page are overflowing they will be cut off. So, you must ensure that they are not overflowing by doing something like below:
.innner-element {
max-width: 100%; /* Ensures that it doesn't extend beyond its parent */
}
Update:
After looking through and testing out the CSS, it looks like the website behaves how you want it to when you make the following changes:
#media screen and (min-width: 320px) { /* do the same thing for (min-width: 480px) */
.typology-section {
/* this makes all the text fit in the view */
width: 80%;
/* the ad is wide, so this cuts it off at a certain point so no need to scroll */
overflow-x: hidden;
}
}
I found this out by using Firefox's dev tools to pick an element (ctrl+shift+c when you're in Inspect Element panel), namely the one going out of the view, clicking on it, and editing the CSS in that panel to find what was causing the problem.
Original Answer
I tried it out, and it looks like the ad at the top of the page is what's taking up a lot of horizontal room and forcing a horizontal scroll bar. Can you try and manipulate the ad with CSS? If so, I would do something like this:
#media screen and (min-width: 350px) { //350-400px is roughly the width of most phones
.advertisement {
max-width: 300px;
}
}
This makes it so that when the screen is a certain width, a max width is applied to the ad.
By the way, if you're using Chrome, you can see the mobile view by opening Inspect Element (ctrl + shift + i) and then toggling the device toolbar (ctrl + shift + m). Just wanted to throw that in there to ease the amount of work in checking the mobile view!
I am trying to make the design of my website https://take-note.com responsive. I was able to get most of it done except for a part that uses a grid based layout. There are 4 columns of images at the bottom of the page titled "notes", "memes", "field notes" and "front page news". I would like these to appear one below the other on a narrow mobile device. I tried to set the width to 100% but that does not seem to do it.
Any advice from CSS gurus?
Use the media query here like this:
#media (max-width: 767px) {
div.cell {
width: 100%;
margin-left: 0 !important;
}
}
This will make the 4 columns to be below one another in devices with width less then 768px; you can adjust this accordingly to target devices as per your use case
I have two category blog layout pages on my guitar website. The intro article images are set to "float: left" which makes the design work on devices with either really small screens or if they have larger screens/flipped screens to horizontal mode.
In vertical mode, on large phone screens, the text wraps around the image in an odd way. Here I would prefer if the text simply just skipped to below the image. You can see what I mean here.
The first example is the effect that I'm after, but on iPhone 6 and nexus phones the wrap effect is unwanted.
Is there any way to make this happen using CSS?
I have tried usin the min-width CSS property but it does not have any effect.
Using Joomla vs 3.6.5, protostar template.
I found two solutions:
.pull-left.item-image {
float: none; /* option one */
width: 100%; /* option two */
}
Only float or only width (or both) will solve your problem. But, please note this will affect the image, not only in the mobile view. So you need to play around with the window's width and see what's the maximum height for the change. then, use #media on CSS (lets say you want it to apply for every screen that is thinner than 450px:
#media screen and (max-width: 450px) {
.pull-left.item-image { ... }
}
How do I write conditional statements for CSS?
I've seen all types of information from
if {...]
#when
as well as #media.
I want to write code for the social (tertiary) buttons to move towards the middle of the page when my site is viewed on smaller screen. I currently have two rows of menu buttons for smaller screens, making the social buttons disappear. I've been reading on various types of syntax but am not sure how to form this.
Thanks
There's no if else in CSS. There is if you are using Blogger. If I want to display something in a mobile screen, I would add this block of code to my css:
#media only screen and (min-width: 480px) and (max-width : 1600px) {
.tertiary-menu {
display:none;
}
}
#media only screen and (max-width : 479px) {
.tertiary-menu {
display:block;
}
}
This means that a screen smaller than 479px. You can add and (min-width: <size>px;) to set a min and max range on when the element should show up.
If you want to click on something to show the menu, I'm afraid you have to use Javascript for that. There are ways to display menus using CSS, if you could check the search bar here: eatingisliving.com. It uses CSS to expand the search bar. Some items also disappears when the screen is resize. To use CSS to show other elements, you can use something like .secondary-menu:hover ~ .tertiary-menu { } or .secondary-menu:focus ~ .tertiary-menu { } but it's limited to sibling or child elements only. Only the parent element or a sibling before the target element can trigger it.
If you could provide your codes and more details. I can help you fix it.
When I resize the screen of the browser on Google Chrome (I haven't tried on another browser) the value shown is wrong. It makes my work harder when I have to use a media query. I can't find any answers about it. Even if the issue is restricted to Chrome, I would like to know why this happens.
Doesn't match with
#media screen and (max-width: 1067px) {
//do something
}
for example.
EDIT: When I resize the screen to see if my layout broke at a certain width and pick the width shown to use in my media query the query doesnt run at that browser width, but if i put something like 200px more it works but i lose precision.
Using the previous example:
Suppose that is not google site, is my site, and on this width (1067px)I need to center a div.
If I try:
#media screen and (max-width: 1067px) {
margin: 0 auto;
}
It wont work at the specified value (1067px), but if I put something like max-width: 1267px will work but losing precision.
I dont know exactly how much in px is the variation but is around 200px.
The example of center a div is only an example, the fact is: Nothing specified on the query at 1067px work, if I decrease further will work, but too late, forcing me to increase the 1067px to 1267px to run when I want.
IMPORTANT: I have not tried other browsers besides Chrome.
#media screen and (max-width: 1067px) {
//do something
}
I didn't understand your problem well I guess, but I will explain how #media works.
If your screen has from 0 to 1067 width it will work with the css inside this #media screen. It doesn't mean it will limit your screen to some value, you must setup your page to work with max-width of 1067px.
Like this(using max-width on div's and other elements):
<div id="home>
//content
</div>
And your css would be like this:
#home
{
max-width: 1067px;
}
Hope that Helps!