I'm reading some books and trying to create a responsive layout but still don't know how to cope with random windows sizes. I know there's a difference between devices and screen, I just can't figure out why can't control display when resizing the browser window.
It that a structure issue, wrong css code or I'm forgetting something?! I need to add mediaqueries for variable widths ranges?
An example:
I set most sizes for devices (1204px, 768px, etc) works ok, but variable widths seems to act strange. I added then a mediaqueries such #media screen and (max-width: 1100px){ ... } but still I get issues on 720px or 620px etc.
I use display snipets from here.
Thanks for any help!
Silly me, I just found out that my code was messed: I had mediaqueries on wrong order so classes end up being ignored. Please refer to this topic.
Thanks you all!
Related
Im helping out in cleaning up and renovating a website for a friends organisation/art place.
We are working on Gallery of images of the last years of business.
See link to one of the gallerys-> http://www.stallbergsgruva.se/2018-2/
My problem is when I view the page on mobile (Android and Iphone) the Gallerys melt together and don't display in a nice way. For example it would be nice to have them all in one column or two but atlas separated and not smudged together as it is now.
Im looking for some CSS code that takes care of this. I have tried a bunch of different codes I found on similar issues but nothing affects my gallery. Im new to this code so many I'm missing something?
Im a beginner at code but can handle it if you add a more thorough description of what code and where to add it, etc.
Thank you in advance! // Erik
This can be done by defining width in media queries. I see you have defined
.gallery-width: calc((100% - 16px)/2
Change it to .gallery-width:100% at the resolutions at you which need this result. More info about media queries can be found at
Media Queries
Code Screenshot inside colsole
So in your case let us assume upto 600px you need this result this is how the media query will look like which needs to be added to your css file :
#media screen and (max-width: 600px) {
.wp-block-gallery .blocks-gallery-item{
width :100%;
}
}
I'm working on a wordpress template with bootstrap 4 and I'm kinda lost. The container isn't scaling down smaller than 576px and I can't figure out why.
Here's a link to the website:
I really don't know where to begin to look for the mistake I'm making, so any idea would be highly appreciated.
after doing some inspecting it looks like your maxmegamenu doesnt have any media query that accounts for any screen sizes smaller than 600px
Wow.. nvm. I had a min-width:550px on the html-element in CSS. I don't even know why. Removing that fixed the problem.
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://www.lifespectrum.eu
And heres my css: http://lifespectrum.eu/wp-content/themes/govpress/style.css
(lots of thrash there though)
Please ask if you need anything else!
Thanks in advance!
The scaling is done in the css file via media queries. Adjust these statements accordingly to make the background/header do what you want:
#media screen and (max-width: 840px)
#media screen and (max-device-width: 680px)
#media screen and (max-width: 480px)
Mobile behaviors are CSS. Your last CSS codes #media screen and (max-device-width: 680px) are doing this behavior. You can easily check your responsive style just by making your desktop window screen smaller and larger. By doing this, you can easily see that your logo header is responsive but your body content is staying the same.
I would inspect element on the body and do the same as you did with the .logo You can preview your changes by editing right in the inspect element with chrome (right-click & inspect element) just to see how it'll look.
It looks like your background/header are the only elements that have css written to resize them in the media queries cfnerd listed.
The content area has the classes you need to adjust settings for in the media queries at different widths. For example, you have .topwhite and .top divs set in the css to a static width of 810px. Once the window width is smaller than 810px those will give you the nasty horizontal scrolling bars. One quick fix is to set them as a
width:100%;
max-width:810px;
so that at most they can go to the original size you set but as the device or window width gets smaller the size of those divs will shrink along with it. That will only help you with the containers, you will have to also add new css settings for the contents as well. But you can use the same idea.
You may need to implement the viewport mets tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I've found StackOverflow extremely useful so thanks for any help in advance.
On http://test2.heyscout.com/, I'm wondering how to properly set up my background-image in my "hero div" for responsive web design. I've been playing around with numerous settings but I'd like it to:
stay in position consistently without jumping around due to browser size (for example, on the mobile phone, it gets misaligned or there's white space where there shouldn't be)
the 'Verify Anyone Offline' doesn't resize properly even though I set it in em
the button looks strange on a mobile device
What is the best practice for keeping the "hero div" in check? I'd surmise it'd have to do something with the min-height or perhaps fixing the dimensions of the actual image. Should I set the height of the hero div in percentage rather than pixels?
Also any advice on how to keep my "trimester div" fill up nicely the bottom 1/3 of the page consistently would be great- I'd imagine when the height of the browser is bigger than expected, it'd look strange. I've read that it's best to keep the height attribute alone for RWD but I'm wondering if there are any tricks to make sure it resizes properly.
Have you looked into Media Queries? Basically, they allow you to set specific CSS based on browser width (and height). This will allow you to control how your page looks at specific browser sizes.
Example - CSS at different widths:
#media screen and (max-width: 600px) {
/* add some CSS here for 600px maximum width*/
}
#media screen and (max-width: 960px) {
/* add some CSS here for 960px maximum width*/
}
To get the background image to always fill the div, use background-size: cover2 unless you need to support IE8.
If your font size doesn't look right across pc/tablet/handheld, try using media queries to set font sizes for specific resolutions.
I'm not sure how to help you with your button "looking strange", except to offer profuse sympathy.
In the future, try to keep your questions more focused. :)
give
background-size:contain;
and this may solve your problem, because it will auto adjust size by contain!
I just learned how to use CSS media queries to make my page fit the screen when the user re-sizes the window, or has a different screen resolution.
My page is designed so that the user won't have to scroll at all.
I want to make my page to fit on 1280px by 768px and 1280px by 960px screen resolution.
The problem is, the page gets all messed up when I have similar widths (1280px).
Could someone please assist me?
I greatly appreciate your help!
You can setup styles between specific dimmensions. For example, something like this:
#media(min-width:768px) and (max-width:979px){
<styles go here>
}
And then, anytime the viewport is between these two dimensions, your styles will adhere.
And I just realized how old this post is, but I'll go ahead and add it anyway in hopes it helps someone out.
Use a comma to specify two (or more) different rules:
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
You might wanna check out http://css-tricks.com/resolution-specific-stylesheets/
It's an excellent guide on how to create multiple stylesheets for different resolutions.