Problem with CSS on mobile template / oxygen

blackmountainresearch · Member · Mar 19, 2015 at 11:15 pm
Copy link

Add topic to favorites
Hey,
I have a problem with the mobile version of my website:
http://black-mountain-research.com/
The custom image merges into the site title.
I have tried all margins etc.
Any idea? Thanks in advance!

The blog I need help with is: (visible only to logged in users)
jsmutek · Member · Mar 19, 2015 at 11:45 pm
Copy link
Hey,

You could try absolute positioning the image, but use a media query to only do so at the point that it starts to look bad.

Try this –
```
/* absolute position custom image on small screens *
** (ie. only do this on a screen whose width is no more than 768px) *
*/

@media (max-width: 768px) {

  /* give the parent element relative position */
  #masthead {position: relative;}

  /* adjust top and right values to taste */

  img.custom-header {
    position: absolute;
    top: 200px;
    right: 0;
  }
}
```
This only kicks in for screen sizes of 768px or smaller, which will cover you mobile styles.

Setting the parent element (#masthead) to relative positioning means the absolute positioned element will be positioned relative to the size of the masthead.

Basically, the size of the masthead element becomes the containing “box” in which you absolutely position the child.

You can adjust the top and right values to taste. It takes values in pixels (px) or 0.

More info –
http://www.w3schools.com/cssref/pr_class_position.asp
http://www.w3schools.com/cssref/pr_pos_left.asp

You can also use bottom, or left values, but usually one value from each axis (x and y) is fine.

Does this help?
blackmountainresearch · Member · Mar 21, 2015 at 12:46 am
Copy link
Thanks for your quick reply!
I’ll try that solution – it sounds right.
The problem is that the image floats…
blackmountainresearch · Member · Mar 21, 2015 at 12:50 am
Copy link
@jsmutek thanks again! It worked perfectly!

No items found.