Motif theme: problem with front page text box position on small screens

orangemediatique · Member · Feb 6, 2014 at 2:02 pm
Copy link

Add topic to favorites
Hi there,

I changed the position on the text box in the front page of my blog thanks to this piece of code:
```
.front-page-content-area .with-featured-image .hentry {
	margin-top: -400px;
	margin-left: 500px;
}
```
Then I realized this code was not working with small screens (iPad, iPhone…): the text box goes out!

So I tried this piece of code:
```
.mobile-theme.front-page-content-area .with-featured-image .hentry {
	margin-top: -400px;
	margin-left: 500px;
}
```
It makes things right on small screens but wrong on “normal” ones. I tried the two pieces altogether…but it seems that the mobile-theme code rules.

Does anybody know how to control the position of such a text box on every kind of screens?

Thanks for your help!

The blog I need help with is: (visible only to logged in users)
hfzrhmn · Member · Feb 6, 2014 at 10:24 pm
Copy link
Hi again :)

To make specific CSS works only for specific screens, take a look at Media Queries:

Media Queries for Standard Devices

Put your piece of CSS code for mobile inside the brackets of the media query for ipad/iphone and it should work for mobile-only.
orangemediatique · Member · Feb 10, 2014 at 8:37 am
Copy link
Great tip! A million thanks!

No items found.