How to make Full width lines Responsive

  • Hey,

    So I was hoping to get some support on this one if anyone knows how to do it.

    Basically, I have added two lines on the header of my website with 1200px width. however, this is damaging the mobile visualisation as these lines maintain the same px instead of going responsive.

    the website is this one https://www.ios-security.co.uk and you may see one line on the very top with 6px of height. And another one but thiner below the main menu with just 2 px of height.

    does anyone knows how can I maintain these lines as they are on a desktop view but, once minimised to a tablet or a mobile making them responsive as well ?

    this is what I have:

    the thicker line on top:
    <div class=”aligncenter” style=”width:1200px;height:6px;background-color:#0c3c60;font-size:0;”>-</div>

    the thiner line below:
    <div class=”aligncenter” style=”width:1200px;height:2px;background-color:#0c3c60;font-size:0;”>-</div>

    Many thanks in advance

Viewing 4 replies - 1 through 4 (of 4 total)

  • Don’t add inline styles.

    Do this instead:

    <div class="aligncenter topline">-</div>
<div class="aligncenter bottomline">-</div>

    You can then define different styles for each line based on an @media query.

    Thread Starter anunomalta

    (@anunomalta)

    Thanks for your reply.

    I have tried using that but didn’t work at all though. The only thing that happened was a blank space where I added that css sentence.

    What I really need though is to make those 2 blue lines responsive. I added this in the Header section. I know it is not the best way but it does the trick. But it is not responsive. Browsing through a mobile both lines will still keep the 1200 px width.

    I have this for those 2 blue lines at the header:
    <div class="aligncenter" style="width:1200px;height:6px;background-color:#0c3c60;font-size:0;">-</div>

    Can anyone help me on this one please?

    I would be much appreciated.

    Kind regards,
    Amilcar

    What I really need though is to make those 2 blue lines responsive.

    Inline styles will override any external stylesheet. So as long as you are adding inline styles, these lines will not be responsive.

    How are you making your web site responsive? With a responsive theme? If so, which one?

    Thread Starter anunomalta

    (@anunomalta)

    Hi kjodle,

    Thanks for your reply.

    The theme I am using is as follows:

    WordPress 4.0.8 running Quark theme.

    The way the website is responsive it is through the responsive theme yes.

    The way to go maybe would be something like adding a css sentence like .bannersomething and then set the specifics for color and height maybe ? But exactly how it’s done I don’t really know.

    The previous banner wasn’t much compatible with the site when it comes to design only though so I set the following sentence to remove it:

    .banner {display: none!important;}

    and then added those 2 lines.

    Again, they do the trick but only on a desktop view.

    Don’t know if there is a shorter way to make these lines responsive or if I have to write a new code to make those 2 banners and then making them responsive too?

    Kind regards,
    Amilcar

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to make Full width lines Responsive’ is closed to new replies.