Docs

[srinivasmishra]

Hi There,
I had almost completed my website and planning to release it. Fort the same i added media queries in css.

It worked well first like:

1. 2 column for max width 480 and entry header 2 font size and all

but after few hours my website getting collapsed in any browser from width 1280 and other media query not working for any resolution.

Surprisingly in chrome, everything is fine.

Need help urgently as i want to launch my blog by end of the month.

[srinivasmishra]

This reply has been marked as private.

[srinivasmishra]

hi there i got the issue:

1. customizer is not fully functional.
2. css not at all working
3. layout and design, if i try to make site width 100% and content 85%, it come back to default after reloading.

i dont know why but customizer is creating the problem.

i had already did fresh wordpress install via ftp, fresh themes install too. no luck till now.

As i remember in morning i had tried to put demo integrity one content in my website and it got error. my whole website gone. I was having backup so replaced all the files and then i am facing this css issue.

[srinivasmishra]

This reply has been marked as private.

[Paul R]

Hi,

Upon checking, I can see you have syntax error in your css code which prevents everything below it from working.

Please remove this in your custom css

 .entry-thumb:before {
    content: \"\\f008\";   
}

.x-recent-posts .format-standard .x-recent-posts-img:before {
    content: \"\\f008\";
}

Then add this in your child theme’s style.css

body .entry-thumb:before {
    content: "\f008"; 
    font-family:fontawesome;  
}

body .x-recent-posts .format-standard .x-recent-posts-img:before {
    content: "\f008";
    font-family:fontawesome;
}

For #3

Plesae note that content width will only work for layouts that have sidebars

Thanks

[srinivasmishra]

hi there,
thanks for the response.

i did whatever you said but it seems my media queries are not working. please correct me if i am doing it wrong.

@media (max-width: 480px) {
.x-iso-container.cols-3>.hentry {
width: 50.00%;
}
.entry-header {
font-size: 5px;
height: 55px;
overflow: hidden;
}
.entry-content{
margin-top:0px;
}
}
@media (max-width: 767px) {
.entry-header {
font-size: 5px;
height: 70px;
overflow: hidden;
}
.entry-content{
margin-top:0px;
}
}

@media (max-width: 979px) {
.entry-header {
font-size: 9px;
height: 80px;
overflow: hidden;
}
.entry-content{
margin-top:0px;
}
}

@media (max-width: 1199px) {
.entry-header {
font-size: 9px;
height: 80px;
overflow: hidden;
}
.entry-content{
margin-top:0px;
}
}
@media (min-width: 1200px) {
.entry-header {
font-size: 9px;
height: 80px;
overflow: hidden;
}
.entry-content{
margin-top:0px;
}
}

[srinivasmishra]

its done with the following code:

@media (min-width:980px){
.entry-header {
font-size: 6px;
height: 66px;
overflow: hidden;
}
.entry-content{
margin-top:0px;
}
p span{font-size:17px;}
h1 span{font-size:50px;}
h2 span{font-size:42px;}
h3 span{font-size:34px;}
h4 span{font-size:28px;}
h5 span{font-size:22px;}
h6 span{font-size:18px;}
}

/* Tablet */
@media (max-width:979px) and (min-width:760px){
.entry-header {
font-size: 6px;
height: 63px;
overflow: hidden;
}
.entry-content{
margin-top:0px;
}
p span{font-size:17px;}
h1 span{font-size:40px;}
h2 span{font-size:35px;}
h3 span{font-size:30px;}
h4 span{font-size:25px;}
h5 span{font-size:20px;}
h6 span{font-size:16px;}
}

/* Mobile */
@media (max-width:480px){
.x-iso-container.cols-3>.hentry {
width: 50.00% !important;
}
.entry-header {
font-size: 5px;
height: 55px;
overflow: hidden;
}
.entry-content{
margin-top:0px;
}
p span{font-size:13px;}
h1 span{font-size:24px;}
h2 span{font-size:20px;}
h3 span{font-size:19px;}
h4 span{font-size:18px;}
h5 span{font-size:17px;}
h6 span{font-size:16px;}
a.x-brand.text {font-size: 18px;}
}

[Jade]

Hi there,

I am not sure what you mean on your most recent response. Did that code you posted got the issue sorted?

Let us know if the issue still exist.

[Author]

Posts