last day (33 days later) » 

5:35 PM
0
A: Getting horizontal scroll bar when everything is contained in the divs

JamesThe horizontal scroll bar is appearing because <ins class="adsbygoogle"> in the div #box6 has an inline width specified to 200px. To remove the horizontal scroll use the below css #box6{ overflow:hidden; } EDIT: To get the desired effect as mentioned in the comment try the below css in media...

 
how will that cause the ad to act once ive added overflow hidden?
i added it but nothing changed
 
I checked you website by when i inspect element, i don't see the overflow:hidden applied to box6
Well i checked now and it looks like the overflow:hidden is being applied. This might solve your problem with the scroll bar. But i think when you add the ads, it might cut off when it is beyond the container width. To prevent the ads from cutting off, i suggest to make few changes in your media queries for smaller screen..right-column{clear:both;float:right; // change this to float left }. You can try this but i am not sure how this will work
 
well the divs there are overlapping and are meant to go underneath each other on browser resize. do you know why it isnt happening?
 
you have to clear the floats. Apply the clear:both to .right-column
 
worked. Why is right column sitting below to the right of left column and not next to?
 
5:35 PM
when you give clear:both to the right column, it moves to position after the left column, ie it clears the float. And since there is a float:right for the right column it moves to the right side
 
how would i accomplish what i need to do then?
 
So you want both the left and right divs to stay next to each other even on small screens? Or on small screens the right-column div to go below the left div?
 
next to each other on bigger screens to under each other on smaller. something i could easily do with them in a container div but this email subscribe form thing messes that up because its got a few divs of its own
 
@Techagesite Sorry i was unable to reply sooner. Since i can't make a long comment i have updated the answer. Please check and let me know if it helps you
 
unless ive been fiddling with code while waiting for your reply and have changed something and forgot id say its not working. code.container3 { width: 100%; } .left-column3 { width: 50%; float:left; } .right-column3 { width:45%; clear:both;float:left; }code
are you still good to help?
i didnt see your edit there sorry. what sort of compatibility would using this media query have?
 
5:35 PM
I am always good to help. I see that you have made some edits to your css in the site. The media queries i mentioned in the answer is for iPhone.
 
:) yeah i made the changes but its still not working. So i have to get them next to each other for big screens. How should i do that?
 
Ok fine. Lets try once again from beginning. First in your style .right-column3{width: 45%; clear: both; float: left}; remove the clear both, and change the float left to right. Now try resizing the browser and check when are you having trouble with the alignment. After that we will go to next step
 
ok done that bit
 
Does it look fine for you in desktop? If not just let me know how you want it.
 
no they arent sitting next to each other still
 
5:36 PM
so u want both the divs next to each other right? ie floated left right?
 
yes on big screens and to drop underneath on smaller screens where they wont fit
 
but you know floating them next to each other won't look good. This is just an opinion
let me look what we can do to get them side by side
is this how you want or you need to reduce the space in between them further
 
5:51 PM
yes like that. why wont it look good?
 
To get as in the image all i did is change the float right to left for .right-column3
Try doing it and check it by re-sizing the window and check when it goes out of alignment. If possible take a screenshot and upload it here so that i can understand much clearly your issue.
 
6:17 PM
now it works in bigger screen windows but when i resize the browser small it overlaps again
how do i upload an image in here?
 
take a screen shot and next to the send button you can see an upload button
 
6:28 PM
theres no upload button on my end il put it on my server
 
ok
so did you change the float right to left?
 
now try adding this in your css @media only screen and (max-width: 480px) and (min-width: 321px){
#box6 .container{
width:200px;
float:left;
}

}
 
in box 6 i have .container
width:200px;
float:left;
.right-column
float:left;
width: 100%; }
thats for landscape yes?
 
its for devices with min-width:321px and max-width 480px
not just for landscape
 
6:43 PM
only other one i have thats close in my media queries is portrait at 320 max width
 
sorry i didn't get what you meant
 
i have applied the code to box 6. the only other media queries i have that are close to 321 would be phone portrait which is 320 max width. should i apply it to that too?
 
you can apply to that also or you can target all the devices below 480px width with using this @media only screen and (max-width: 480px){
#box6 .container{
width:200px;
float:left;
}

}
 
ok. so any ideas why its still overlapping?
 
did you add this to your styles
 
6:53 PM
yes
#box6 {
.container
width:200px;
float:left;
.right-column
float:left;
width: 100%; }
 
ya i see that the divs are still overlaping
let me check
to which css file are you adding these changes?
i have to leave now
so i will give you some suggestions
i see that you have applied the styles to @media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape)
you have used orientation landscape
so when you resize the browser the styles in the above queries wont get effect because the desktop is always portrait
so try removing the orientation
and then try resizing your browser and look if it comes as you need
 
7:17 PM
ok i will give it a go and get back to you
 

  last day (33 days later) »