Responsive layout CSS

[bregtv]

Hello,

I’ve a question of modifying the layout when I open the site on a mobile:

1) problem: text over image:
< removed >

2) problem: too much white space between elements:
< removed >

I know there is a CSS: responsive, but don’t want to “mess it”…

Thanks for helping!
Bregt

[7Theme Support]

Hi Bregt,

I think it’s because you have added a lot of content in the extra header content section, because on our demo website it works.

To change it, you can use these codes:

@media only screen and (max-width: 767px) {
#container .headline_additional_content, #container .header_add_content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
#container #brand img, #container #brand a {
margin-top:0;
}
}

This should reduce the white space and prevent the content from covering the logo

[bregtv]

Thanks for the reply!

It works when I added:

@media only screen and (max-width: 767px) {
#container .headline_additional_content, #container .header_add_content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
#container #brand img, #container #brand a {
margin-top:0px;
}
}

AND

@media only screen and (max-width: 479px) {
#container .headline_additional_content, #container .header_add_content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
#container #brand img, #container #brand a {
margin:0px auto !important;
}
}

ps: How can I delete this whole topic? (screenshots)

[7Theme Support]

Ok, great, I’m glad it’s working now. We removed the screenshot from your posts…

[Author]

Posts