Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • October 1, 2015 at 10:45 am #512061
    libelum

    Hi,
    when my website starts to be responsive, the margins on the header move to the right and the top banner becomes full width. Would be great if we can keep the margins when responsive (I assume that margin will vary based on the size of the screen, which is ok as long as it’s the same as “A” [blue dot on the screenshot] )

    View post on imgur.com

    let me know!
    thanks!!
    Delia

    October 1, 2015 at 12:58 pm #512117
    Yigit

    Hey Delia!

    Do you remember we added these codes 

    #header_main {
    max-width: 950px;
    margin-left: 50px;
}

    Please wrap them into media queries as following 

    @media only screen and (min-width: 1024px) {
/* PLACE THAT BLOCK OF CODES HERE */
}

    Regards,
    Yigit

    October 1, 2015 at 1:17 pm #512133
    libelum

    Hey!
    ya I do remember
    If I replace it: doesn’t work
    if I add it: doesn’t work either

    :(

    October 1, 2015 at 1:18 pm #512136
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately?

    Best regards,
    Yigit

    October 1, 2015 at 1:24 pm #512142
    libelum

    thanks!

    October 1, 2015 at 3:42 pm #512226
    Yigit

    Hi!

    I adjusted the values. Please review your website now

    Cheers!
    Yigit

    October 1, 2015 at 4:54 pm #512269
    libelum

    Hi Yigit!
    Thank you for the adjustments!
    header lines are ok
    missing one important thing: to have margins for the banner (now is full width)

    View post on imgur.com

    do you tink we can adjust that?
    thank you again!

    Delia

    • This reply was modified 9 years, 9 months ago by libelum.
    October 2, 2015 at 9:10 pm #513034
    Andy

    Hey!

    try this code:

    @media only screen and (max-width: 767px) {
div#layer_slider_1 {
left: 25px;
width: 325px;
}}

    Cheers!
    Andy

    October 5, 2015 at 11:11 am #513605
    libelum

    Hi!
    Thank you for the code!
    it works for mobile devices, sorry I didn’t mention (tablets)
    when the menu goes to an icon (when responsive starts) the top banner is still full width
    can we keep the margin as well?
    thank you!!

    View post on imgur.com

    October 5, 2015 at 11:47 am #513631
    Andy

    Hi!

    adjust my code and use different media queries which fit your needs. Check out this link and look for “Tablets”: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Cheers!
    Andy

    October 5, 2015 at 12:01 pm #513653
    libelum

    Hi Andy,
    I’ve been trying different media queries and I just realize that what we are doing is adjusting the size of the banner, doing so, we will need a media querie for each phone and tablet, what probably will leave us a gap somewhere.

    Is it possible to add a code that keeps the responsiveness of the top banner but keeping the margins? (in a responsive way)

    thank you! ;)
    Delia

    October 5, 2015 at 12:12 pm #513666
    Andy

    Hey!

    responsiveness does not mean it will look automatically how you want and instead it means you can control different behaviors for different screen sizes (using media queries for example). So there is no code which will do any magic :) and you need to use media queries for different screen sizes.

    Best regards,
    Andy

    October 5, 2015 at 12:28 pm #513685
    libelum

    Hey!
    understood! ;)
    I was just looking for the same behaviour the top banner has when is full width but adding margins.
    (when you resize the window the image just adapts every pixel you resize)
    but you said is not possible unless you have a querie for each size, right?
    I’m judt double checking, in case before I asked the wrong thing

    sorry for my ignorance, is not my field and some times I get lost when trying to explain

    thank you Andy

    Delia

    October 5, 2015 at 1:23 pm #513741
    Andy

    Hi!

    like I already said, you need to use media queries for this: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

    October 5, 2015 at 1:31 pm #513746
    libelum

    thank you

    October 5, 2015 at 1:47 pm #513758
    Andy

    Hey!

    you are welcome. Let us know in a new ticket if you have some more questions or issues related to the theme.

    Regards,
    Andy

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Wrong margins when responsive’ is closed to new replies.