I have tried a hundred different combinations for my menu bar (secondary-menu) to wrap in two rows when viewed in smaller browser screen or device.
The last one I tried was this:
#viewport {
width: device-width;
#media only screen and (min-width : 375px) and (max-width : 667px) {
.secondary-menu {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
Can someone please help me fix this code or write another one that automatically shows two rows for the top green menu bar with all buttons on a smaller screen? (The rest of my site is responsive so I don't need to make this work for the whole site, just this element.)
You should first add “height:auto” to your ".secondary-menu ul" class definition.
Then you should add “float:left” to your current stylesheet class, so the class will end up like this:
.boldgrid-framework-menu li, .footer-center-menu li {
list-style: none;
display: inline;
list-style-type: none;
float: left;
}
Now when i scale your site, the buttons automatically appear on another row.
Related
I would like help with code that will show a different slideshow section on Shopify based on the users screen size. I am using the code below which works great on a mobile device but on my laptop I see both slideshows.
What code do I need to add to hide the mobile slideshow when the screen size is above a certain amount of pixels?
#shopify-section-mobile-slideshow {
display: none !important;
}
#media (max-width: 450px){
#shopify-section-slideshow {
display: none !important;
}
#shopify-section-mobile-slideshow {
display: block !important;
}
}
Question answered by #stenley -
Use inspector elements to ascertain the section ID
For me:
#shopify-section-1586161998623 { display: none; }
#media (max-width: 768px){
#shopify-section-slideshow {
display: none !important;
}
#shopify-section-1586161998623 { display: block; }
}
im using wordpress oceanwp theme to create my ecommerce website. Im using medium header sytle for m website. however, i wan my mobile screen to show a different header style of "minimal".
So is used the custom css code to fix this. However, the arrangement in header are (logo/cart icon/menu). But what i expected is rearrange it's position to (menu/Logo/cart icon).
#media only screen and (max-width: 959px) {
.top-header-wrap.clr {
width: 50%;
}
.bottom-header-wrap.clr {
width: 50%;
}
div#site-header-inner {
display: flex;
}
.oceanwp-mobile-menu-icon.clr.mobile-right {
height: 100%;
line-height: 100px;
}
}
Is there any css code the can help me to solve problem. I expected to get my mobile size screen's header with the arrangement of (Menu/Logo/Cart Icon)
Thank you!
can you Please send the html code how they are now
or
You have to put the code like this
.header{
display: flex;
align-items: center;
justify-content: center;
}
.header div{margin:0 10%; text-align:center;}
<div class="header">
<div>menu</div>
<div>logo</div>
<div>Cart</div>
</div>
refer this for flexbox ordering.
Use display flex for parent class of header elements and custom order can be specified like this :
.box :nth-child(1) { order: 2; }
In my class we are starting to use Media Queries and I am having a little trouble with an assignment. For a previous assignment we were tasked with remaking a website called "the Toast" as best we could, which I have here. Now for this assignment we are to use media query to do a few things:
This assignment is all about media queries and getting your site to be
responsive. We will be using the website The toast again for this
assignment. You will be laying out two columns for the content area.
When the screen size hits 960px the right column must disappear. The
articles in the left column must adjust to the width of the screen.
The images must get bigger and fill the article at 960 px as well.
At 760 px the support us button, love the toast text and the social
media must disappear.
In the code I have two columns, a "bigColumn" and a "adColumn". Now to my understanding to make the adcolumn disappear and adjust the bigColumn I simply have to add:
#media only screen and (max-width: 960px) {
.main {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
}
However this is not working. The ad never disappears and the rest of the content doesn't do anything in terms of filling the rest of the page when shrinking the window. If I change the background color in the .main the color changes, but changing anything in the two divs has no effect that I can see. I can get the social media icons to disappear at 760px just fine, so am I just missing something with the media query for the columns? Or could something else be interfering with it?
EDIT: Guess I should mention that yes, I am indeed using SASS in the project.
Here is the styling I have for the columns before I started the media query:
.main {
width: 90%;
display: flex;
min-height: 200px;
margin: 0 auto;
//column for main-page content
.bigColumn {
width: 800px;
height: 100%;
margin-top: 20px;
margin-right: 9%;
margin-left: 13%;
}
.adColumn {
margin-top: 20px;
position: relative;
min-height: 120px;
}
}
I don't believe you can nest your CSS like that unless you are using a preprocessor like LESS or SASS. Try taking the .bigColumn CSS out of the .main brackets and leave it on its own.
#media only screen and (max-width: 960px) {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
Based on your css I think you're close, but there appears to be a an error in the way you've structured your css. Give this a try. I'm assuming .bigColumn and .adColumn are children of .main:
/* All screens 960px or less */
#media only screen and (max-width: 960px) {
.main .bigColumn {
width: 100%;
}
.main .adColumn {
display: none;
}
}
I installed a plug-in called Display-listings-shortcode, and added the columns-extension to allow for columns the blogs halfway down the homepage at RitaNaomi.com will be horizontally displayed on a web browser. It looked whacky at first with titles being scrunched beside and underneath the image, but eventually i figured out how to edit the .display-posts-listing class to change the display
.display-posts-listing .listing-item {padding-bottom:30;}
.listing-item
{
float:left;
width:22%;
margin: 40px
}
But when I look at it on a mobile device, they're all scrunched together as if it was still being displayed on a laptop. I want to have it listed vertically and not horizontally, because thats the way it would fit best.
I tried (and it didn't work) to use #media to change it through the css, but it didn't work.
#media handheld {
.display-posts-listing .listing-item {
clear: both;
display: block;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
}
You shouldn't be using #media handheld {} since it's been deprecated according to MDN.
You're better off targeting pixel-width values. You may need a couple queries, and some of the oldschool standards were 1023px, 767px. Feel free to replace the 900px below with whatever works for you.
#media only screen and ( max-width: 900px ){
.display-posts-listing .listing-item {
/* CSS Here */
}
}
Removed the custom CSS that was already added from the original theme. It was interfering with the Columns display.
Not using #media handheld {} because it was deprecated (thanks to xhynk for the response), and instead used the command (max-width: 768) , the point at which the title and image css look funky.
To make the title display on its own line on a bigger screen, i added this to my CSS:
.display-posts-listing .listing-item .title { display: block; }
And now i'm using the above media query to figure out how to style it on smaller devices.
Complete CSS: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a
On my page (test online at visal.de/trb/) I currently try to hide one element and show another when the user is on mobile. The blocked element is the top navigation (Glossar & FAQ and Intern), the element I only want to show to mobile users is the element "Weiterführendes".
I tried nearly everything, like this media query:
/* topfix */ #media (max-width: 479px) {
#header nav ul.hide-top, #header .hide-top {
display: block;
visibility: hidden;
}} #media (max-width: 600px) {
/* Header */
#header nav ul.hide-top li {
display: none;
visibility: hidden;
}
#header nav ul.hide-top li .phone {
display: block;
visibility: hidden;
}
but nothing really seems to work. I guess because the code more than once says that it should be displayed whenever, but in the end say that it shouldnt be shown. Possibly this is what occuring the errors. Anyone knowing a fix or what I did wrong?
A media query with max-width tells the browser to apply the styles when the browser shrinks to that size. Min-width is the opposite. It tells to browser to apply the styles when the browser grows to that size.
In the second media query you listed, which is the first one that will activate when shrinking your browser, you're telling it to display: none which will hide the element and will remove the space it occupies. You're also setting visibility: hidden which will only hide the element but not remove the space it occupies. Using visibility here is redundant.
In the first media query, which is the second one that will activate when shrinking your browser, you're telling it to display: block which will undo the previous display: none, but you're still also setting the visibility: hidden, rather than switching it to visibility: visible, so the element still won't display.
Here's a simple example of a mobile-first approach, rather than desktop-first like your example, to show / hide a class.
.my-mobile-image {
display: none; /* This is how it looks on mobile */
}
#media (min-width: 600px) {
.my-mobile-image {
display: block; /* This is how it looks on desktop */
}
}
you are not using the media queries in the right way . you should describe the min and max lenght of the screen
for mobile screen
#media screen and (min-width:299px) and (max-width:479px) {
display: block;
visibility: hidden;
}
other screen resolution
#media screen and (min-width:480px) and (max-width:600px) {
/* Header */
#header nav ul.hide-top li {
display: none;
visibility: hidden;
}
#header nav ul.hide-top li .phone {
display: block;
visibility: hidden;
}
}
i hope it will work can't test it right now at the moment