[ashrafashraf]

I added the following :

@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
#site-generator {
background: url(“http://www.idaat.se/wp-content/uploads/2014/06/f.png”) no-repeat scroll center top #fff;
background-size: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
}
But it is not working,
Please Sakin, Ca do check it ?

[Sakin]

@ashrafashraf: You can add the following css.

#site-generator { 
background-size: 100%;
background-image: url("http://www.idaat.se/wp-content/uploads/2014/06/f.png");
background-repeat: no-repeat;
background-position: center top;
}

But for your padding top you need adjust as per your screen-size. Following is just a sample padding top. You can adjust as per your need.

#site-generator { padding-top: 459px; }
@media screen and (max-width: 1060px) {
    #site-generator { padding-top: 300px; }
}
@media screen and (max-width: 960px) {
    #site-generator { padding-top: 220px; }
}
@media screen and (max-width: 767px) {
    #site-generator { padding-top: 134px; }
}
@media screen and (max-width: 479px) {
    #site-generator { padding-top: 75px; }
}

[ashrafashraf]

Thank you so much.
In this case, must i remove all my code that i added before and then add your code,
Is that right?

Please!!!

[ashrafashraf]

So i must remove the following:
#site-generator {
background: url(“http://www.idaat.se/wp-content/uploads/2014/06/f.png”) no-repeat scroll center top #fff;
background-size: 100%;
padding-top: 459px;
color: black;
font-weight: bold;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
#site-generator {
background: url(“http://www.idaat.se/wp-content/uploads/2014/06/f.png”) no-repeat scroll center top #fff;
background-size: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
max-width: 100%;
}
}

[ashrafashraf]

wow, You fixed the issue.
1000 thanks.
Please, I have the following : http://grab.by/y2gs

How can i put the copyright and power section on the right place when i open it on my iphone ?

Thanks

[Sakin]

@ashrafashraf: Now sure what is your issue. Can you explain it and also your site in offline again.

[ashrafashraf]

It is working now,When I open my site on the iphone then the copyright and the power section is not on the correct position.
Please,Can do check it ?

Thanks

[Sakin]

@ashrafashraf: I see there is so many unnecessary css in your Custom CSS box like below.

@media screen and (min-width: 961px) {
#site-generator .copyright, #site-generator .powered {
    padding-top: 60px;
}
}
 #site-generator .powered {
padding-top: 60px;color: black;
font-weight: bold;
}
#header-content {
}
@media screen and (min-width: 961px) {
}
#site-generator .powered {
float: right;
width: 200px;  }

#site-generator .copyright {
float: left; width: 275px;
}

This padding can be controlled by changing the padding in the css I gave you. Not to add in individually live this.

[ashrafashraf]

Ok sir, I reomved all my codes.
But I get new issue.
Can do please check it ? thanks

I removed all the following :

@media screen and (min-width: 961px) {
#site-generator .copyright, #site-generator .powered {
padding-top: 60px;
}
}

#site-generator .powered {
padding-top: 60px;color: black;
font-weight: bold;
}

#site-generator .copyright {
float: left; width: 275px;
}

#site-generator .powered {
float: right;
width: 200px; }

/*
#slider.slider-fullwidth { margin-bottom: 0 }

.entry-content{
padding-top: 0px !important;
}
article#post-16.post-16.page.type-page.status-publish.hentry{

padding-top: 0px !important;
}*/

[ashrafashraf]

I want to but my power and copyright sections on the bottom of footer to be like:
http://grab.by/y37G

and then I want when i open my site on any devices at will keep these sections on the same place when i open my site on any desktop.

Please,Sakin, help me to do that?

Thanks

[Sakin]

@ashrafashraf: But there won’t be enough space in iPhone to display like that so we have break that into two line.

But if you insist then you can try following css:

@media screen and (max-width: 767px) {
	#site-generator .copyright, #site-generator .powered {
		display: inline;
		width: 47%;
	}	
	#site-generator .copyright {
		float: right;
		margin-right: 3%;
		margin-left: 0;
		text-align: right;
	}
	#site-generator .powered {
		float: left;
		margin-left: 3%;
		margin-right: 0;
		text-align: left;
	}
}

[ashrafashraf]

I added your code, But it is not happened anything.

Please, Can do check it ?Please

[ashrafashraf]

What do you think, if we add the following :
#site-generator .powered, #site-generator .copyright {
padding-top: 60px;}

In this case we will put these sections under the image and we can read them easy.
But i don’t know if it will working with the iphone or another devices !!!

[ashrafashraf]

Hi Sakin,
Please, Can i get a help please?

Best wishes
A.J.

[ashrafashraf]

Hi Sakin,
Please, Can i get help to fix this ticket? please

Best regards
A.J.

[Sakin]

@ashrafashraf: Please stop adding in comment again and again. This will move your question to the bottom as I check in the older question first. So, when you add comment in your old question, your question will become new and will be in last in the list. Just wanted to make you aware of this.

[Sakin]

@ashrafashraf: It’s your wish to add in padding in the site generator. But I advice you to adjust in the css that i gave you previously. You can increase the padding here.

#site-generator { padding-top: 459px; }
@media screen and (max-width: 1060px) {
    #site-generator { padding-top: 300px; }
}
@media screen and (max-width: 960px) {
    #site-generator { padding-top: 220px; }
}
@media screen and (max-width: 767px) {
    #site-generator { padding-top: 134px; }
}
@media screen and (max-width: 479px) {
    #site-generator { padding-top: 75px; }
}

[ashrafashraf]

First, I a sorry for confused.
And please, Can i know which code must i remove before at add your code?please

[Sakin]

@ashrafashraf: It’s the same code I gave you before. I just wanted you to change the padding there. Nothing more.

[ashrafashraf]

Ok, I added the following : Can do please check my site ? the power and copyright sections is not on the correct place on my PC ?
/* Sakin responsive design*/

#site-generator { padding-top: 459px; }

@media screen and (max-width: 1060px) {
#site-generator { padding-top: 300px; }
}

@media screen and (max-width: 960px) {
#site-generator { padding-top: 220px; }
}

@media screen and (max-width: 767px) {
#site-generator { padding-top: 134px; }
}

@media screen and (max-width: 479px) {
#site-generator { padding-top: 75px; }
}

@media screen and (max-width: 767px) {
#site-generator .copyright, #site-generator .powered {
display: inline;
width: 47%;
}
#site-generator .copyright {
float: left;
margin-right: 3%;
margin-left: 0;
text-align: right;
}
#site-generator .powered {
float: right;
margin-left: 3%;
margin-right: 0;
text-align: left;
}
}

/* end of responsive design*/

[Author]

Posts