So I'm building a website in Wordpress and I want the header to be full screen but I'm getting problems with responsiveness so I wanted to make it so the code I use only applies to desktop PC's and Tablets; however I keep getting these expected brace & unexpected token errors. Does anybody know how to solve this? Maybe there is a better way to fix my issue, if so please let me know.. This is the code I'm talking about:
#media only screen and (min-width:768px){
min-height: 100vh;
display: flex;
flex-direction: column;
}
You have to select an element to style and you haven't done that.
Something like
#media only screen and (min-width:768px){
header {
min-height: 100vh;
display: flex;
flex-direction: column;
}
}
Related
I have my website looking just how I want it on a desktop. I have come to adding a media query today thinking it would be as straight forward as its been in the past for me, but it doesn't want to work for me this time. I have added the meta view port (automatically added with Emmet shortcut '!') but no dice.
I just want to switch the flex direction to column and the divs to 100vw. I added the yellow colour here as a visual reference for myself.
#media only screen and (max-width: 720px) {
text__main {
min-width: 100vw;
background-color: yellow;
}
container {
display: flex;
flex-direction: column;
}
menu {
display: none;
}
}
Any guidance would be massively appreciated. The website is currently an eyesore and reflects badly on the content.
Many thanks.
Seems like you wrote your CSS selectors incorrectly. Instead of text__main try .text__main and so on with other selectors (menu could be an HTML tag, so maybe it should stay as it is now).
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; }
I think I am going insane. I cannot figure out why this pricing field all of a sudden stacks below 641 px. Can anyone help me out?
I think I need a new set of eyes to look at the code!
http://forfattarskola.staging.wpengine.com/bildkort/bestall-bildkort/
Good
Bad
Without the code to look at and just the page source it looks like you need to change this css class to use inline-block and not block
#media only screen and (max-width: 641px) .gform_wrapper .ginput_container span {
display: inline-block;
}
try:
#gform_fields_4 li {
min-width: 200px;
}
#gform_fields_4 li * {
display: inline-block;
}
i tested this on your page through chrome debug, and seems to work. add this CSS to page and voilá!
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.
I am trying to validate a css file at w3c css validator. When it is tested it returns an error stating that "Property flex-wrap- doesn't exist : wrap". This is my part that css validator sees wrong.
.row {
width: 100%;
display: flex;
flex-wrap-: wrap;
}
Any suggestion how to solve this problem?
Thanks
flex-wrap- indeed doesn't exist...but flex-wrap exists. See documentation on Mozilla Developer Network
Replace your CSS with the following :
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}