Odd...Same Browser But Different Look

by jbearnolimits

Posted: 9 years ago 10 replies

WEB DESIGN

So I was testing my site last night in chrome 41.0 on my computer. I am trying to get it to be responsive. So on my computer I resized the screen and it all looked great as the size changed. BUT when it is pulled up on a mobile phone with chrome 41.0 there ends up being some overlap of some of the content. Any thoughts on this?

Here is the link by the way: Template 1

#browser #oddsame

KirkMcD 9 years ago

It's not exactly the same browser, now is it?
- Thanks
- 1 reply
{{ DiscussionBoard.errors[9975027].message }}
- jbearnolimits 9 years ago
  
  Originally Posted by KirkMcD
  
  It's not exactly the same browser, now is it?
  
  Search me...I didn't actually have access to the mobile. A friend has it and they just showed it to me and said they had chrome 41.0.
  
  I suppose it may not be...and I know cross browser compatibility is the holy grail. But I would at least like to know how I can make this site work well in the more common browsers. Do you know of a good resource where I can learn how to fix bugs step by step?
  
  Thanks
  
  {{ DiscussionBoard.errors[9975687].message }}

David V

9 years ago

Maybe you could specify the exact content being overlapped.
I see it on an Ipad mini ok and do not see any content overlapping.

You also might find this mobile emulator useful.
MobileTest.me - Test your mobile sites and responsive web designs

Thanks
1 reply

{{ DiscussionBoard.errors[9975804].message }}

jbearnolimits

9 years ago

Originally Posted by David V

THANKS for that link! It is awesome to be able to see it like that. If you see it in landscape with the nokia lumina then you will see the overlap problem with the text from the church online block going up into the other two blocks. This is what my friend had seen as well.

I also see that the apple ipad mini in portrait mode makes a HUGE gap in content.

Thanks
1 reply

{{ DiscussionBoard.errors[9976089].message }}

David V

9 years ago

Originally Posted by jbearnolimits

Ok, you've got quite of few coding issues going on....but....
I'll just try to address the immediate issue.

These two (bolded) are contributing to this problem.

Code:

@media only screen and (max-width: 929px) and (min-width: 670px)
#contentblock2 {
  width: 43.5%;
  /* height: 100%; */
  margin-left: 2.5%;
  margin-bottom: 10px;
  margin-top: 10px;
  float: left;
  position: relative;
}

@media only screen and (max-width: 929px) and (min-width: 670px)
.learnmoreblock2 {
  /* position: absolute; */
  bottom: 0;
  width: 100%;
  color: #E3481A;
  text-decoration: none;
}

The biggest one is using absolute positioning for that learn more link. I remember you had an issue with this a little while back and....
Yes, we said don't use "absolute" like that or the <hr>, use css instead.

And you thought we were kidding!

Add a little margin above that if you need to.

That css above goes with these html tags. (also blocks 1 and 3)

Code:

<div id="contentblock2"><h2>Online Bible Studies</h2><br>

<img id="contentblockimage2" alt="Online Bible Studies" src="http://www.warriorforum.com/images/biblestudies.jpg"><br><br>

What do you need to know? I am convinced that there is not one subject that the Bible doesn't have an answer to, either directly or indirectly. Sometimes we just have to do some heavy searching to find the answers.<br><br>

So if you are curious about what the Bible says on certain subjects go ahead and see if we have a study on it here. If we don't please feel free to contact us and ask. You may have a question that someone else will be searching for later. We would like to be able to help them search it out too.

<div class="learnmoreblock2"><hr><a href="onlinebiblestudies.php">Learn More</a></div><br>
</div>

You can see this for yourself by going into developer tools (chrome) or use firebug in Firefox.
Make sure the dev window is not at the bottom. Pop it to the right or free float it, otherwise you won't see the pushing and overlapping issue.

You can now selectively turn on/off the various properties in css (such as the one's above) and you'll see how they are causing an issue, especially that absolute positioning, which should only be used when needed and selectively.

Pretend there's no such thing as absolute positioning.... You must know how to use that correctly or it can cause some freaky things.

[ 1 ] Thanks

{{ DiscussionBoard.errors[9976162].message }}

jbearnolimits

9 years ago

Thanks David. I remember that but thought I had my problem fixed. Guess I didn't understand the bigger picture. I apologize. I took a new look after removing those items and now see what you mean. I am also going to take a new look at the hr tag to use a div and css instead.

I am certain my code is full of useless lines and things. I am still learning. Never had any schooling on this type of thing. Just started by jumping in and working while trying to read online.

Anyway, thanks VERY much! I hope I am at least learning some things. Right now I have found out that I need to listen to others who may see problems down the road when I only see the one in front of me. Oh...here is a question, with all of the code problems you mentioned is there a way for a novice like myself to find these problems since I obviously don't see them myself? School would be great, but lets face it...I can't do that right now.

[ 1 ] Thanks
1 reply

{{ DiscussionBoard.errors[9980015].message }}

David V

9 years ago

Originally Posted by jbearnolimits

Quite alright. We all have to go through the learning curve.... I've been there as everyone else has at one time.

As far as borders.... it's very common to apply a border, could be the top, bottom, right left, etc...

Such as this for the learn more link:

Code:

@media only screen and (min-width: 930px)
.learnmoreblock2 {
  /* bottom: 0; GET RID OF THIS */
  margin: 10px; 0 0
  border-top: 2px solid #ddd;
  width: 100%;
  color: #E3481A;
  text-decoration: none;
}

Just keep in mind this is for the media query that targets over 930px.
Make sure to look at your other media queries.

[ 1 ] Thanks
1 reply

{{ DiscussionBoard.errors[9980192].message }}

jbearnolimits

9 years ago

Originally Posted by David V

Code:

@media only screen and (min-width: 930px)
.learnmoreblock2 {
  /* bottom: 0; GET RID OF THIS */
  margin: 10px; 0 0
  border-top: 2px solid #ddd;
  width: 100%;
  color: #E3481A;
  text-decoration: none;
}

Just keep in mind this is for the media query that targets over 930px.
Make sure to look at your other media queries.

Thanks again David. I did go through and take out the bottom 0 in all of the learn more items. It didn't seem to change anything but it did take some lines of code out...which is great!

I also noticed that all of your advice helped to fix some issues in not only chrome but ie10 as well.

I wonder if you may be willing to answer 2 more questions?

1. How would you recommend making the 3 columns equal height (in other words I am trying to get the learn more link and line above it to all be at the same horizontal level)?

2. I noticed that the drop down menu on mobile (the smaller screens with the orange link on the top) does not drop down in the mobile emulators. Why is that, and how do I fix the issue?

Thanks in advance! This is really giving me a learning workout! It is a lot of fun to learn these things and then see the result. Which I hope will be a great site!

Thanks

{{ DiscussionBoard.errors[9980602].message }}

David V

9 years ago

jbearnolimits, I'll try and take a look at this a little later (have to do some work first!)

For the dropdown question, it works fine for me across all devices.

Thanks
1 reply

{{ DiscussionBoard.errors[9981104].message }}

jbearnolimits

9 years ago

Originally Posted by David V

jbearnolimits, I'll try and take a look at this a little later (have to do some work first!)

For the dropdown question, it works fine for me across all devices.

Thanks so much! Oh and FYI, I took a look at the link you gave again but opened it with chrome and yes they all work...but when I open the link in ie10 they don't. So the mobile emulator used the same browser for the devices they "emulate" that you open the page in.

Thanks

{{ DiscussionBoard.errors[9981250].message }}

Odd...Same Browser But Different Look

Trending Topics

Any thoughts on golf's latest phenom...Scottie Scheffler??

best high quality crypto traffic.

Should i Index Author pages?

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?

Some interesting stats about brand comms