• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Table looks bad on iphone

Advocate ,
Oct 03, 2020 Oct 03, 2020

Copy link to clipboard

Copied

I created a 5x5 table and inserted it into an html page with text-- above all text.  Looks fine on desktop, but on iphone, the table of images is superimposed on top of the text; so I'm stumped.

 

Google does say its mobile friendly.

Views

898

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 03, 2020 Oct 03, 2020

Copy link to clipboard

Copied

Not surprising.  Tables are not responsive.  Nobody uses tables anymore if we can possibly avoid them.

 

Try CSS Grids.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Evenly Distributed Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 95%;
margin: 0 auto;
padding: 2%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
border: 1px dotted silver;
}
.module {
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
img {
vertical-align: baseline;
display: block;
max-width: 100%;
}
</style>
</head>

<body>
<h3>Welcome to CSS Grids</h3>
<div class="grid">
<div class="module">1</div>
<div class="module">2</div>
<div class="module">3</div>
<div class="module">4</div>
<div class="module">5</div>
<div class="module">6</div>
<div class="module">7</div>
<div class="module">8</div>
<div class="module">9</div>
<div class="module">10</div>
<div class="module">11</div>
<div class="module">12</div>
<div class="module">13</div>
<div class="module">14</div>
<div class="module">15</div>
</div>
</body>
</html>

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 03, 2020 Oct 03, 2020

Copy link to clipboard

Copied

Nancy, thanks, I pasted your code into a new page, and it did not make a grid.  It just made 15 rows.

 

1)  So norhing I can do?  Maybe someone else help.. Just the iphone issue...  Looks fine on desktop

 

2)  But on desktop its on left anyway to center that? I don't see a way to drag it around.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 03, 2020 Oct 03, 2020

Copy link to clipboard

Copied

Preview in REAL browsers, not DW.

 

CSS Grids on DesktopCSS Grids on Desktop

CSS Grids on iPhoneCSS Grids on iPhone

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 03, 2020 Oct 03, 2020

Copy link to clipboard

Copied

Ok Nancy, lot re-working have to do, but will test out and let your know, thanks!  (might have some more questions later)......

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 04, 2020 Oct 04, 2020

Copy link to clipboard

Copied

Depends what you are creating. If its a simple image gallery then grid or flex is the way to go, if however its a table of data information then grid/flex is probably not the way to go. Sometimes you  just have to use a table and force the user to scroll right. Use tables sparingly where possible. Some data like complex technical specifications arent best suited to the web so you have to do your best IF clients demand that technical specifications be used.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 04, 2020 Oct 04, 2020

Copy link to clipboard

Copied

If we could see what the OP is working on, we wouldn't have to make guesses.  But based on the opening question, he said this was a table of images.  I took that to mean he's using tables for layouts which is a really bad idea.  Especially now that we have good responsive options available in CSS.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 04, 2020 Oct 04, 2020

Copy link to clipboard

Copied

Well there's more than meets the eye going on here as some text is involved too, according to the OP.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 04, 2020 Oct 04, 2020

Copy link to clipboard

Copied

Thanks, all table of images, great on desktop, very bad on iphone. Will use Nancys code in next few days and report back. I have feeling it will improve this thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

Ok Nancy, did test pages, and dragged in all 25 images again, and in real browser the gird looks good, (except for the welcome to css grid at top), but images are not there, even though they are there and looking fine in dreamwearer.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

Are you testing on the remote server? Did you upload images to your server?

Can you post the URL here so we can see what you see?

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

Thanks Nancy, yes real server, real webiste. Testing on a test page now.. 

In DW the images are in an image folder outside of the folder where the .html file is. I don't think that matters?

Looks fine in DW, see images connecting ok,   In DW browser test safari they come up good but are all vertical no grid.

 

On real server, the grid is good, but then no images, just icon for missing images.

 

the test I few days ago got the grid and one image in good. Now I put 25 in and no luck. 

 

Website has real name, don't post real names on these forums for obvious reason... but I'd PM to you if want.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

PS sourse images were dragged in so in DW and also my html  see ...image... 

 

But with CSS, dont see the ....

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

online this code works fine by dragging in image with table / html page  just works fine,  all the images show up in the , with CSS grid  all blank.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

bTW how edit my post? I don't see an edit or delte option here anymore

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

Owing to abuses, editing posts is no longer possible except by ACPs, MVPs and Adobe staff.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

Thanks Nancy, my head is melted by now. I'll try tomorrow again. I can't use validtor, way over my head, I 

Maybe I'll try direct path, but even that gets very hairy, Totally stumped.

 

Osgood if you are here still have any idea?

 

Thanks Nacy for strating this help process hopefully figure it out, not easy!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

Hi larry,

I no longer use Dreamweaver so can't be of any great help. It once had a point and drag option, like a target icon, which you clicked on and dragged a line out to point to an image in a folder, is that what you are using?

 

Obviously the ../ infront of the folder is crucial.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

thanks Osgood, yeah, just dragged in images, that was great feature of DW!  works fine old html, but not CSS or doing soiemthing wrong, will keep trying.. per Nancy ideas, thanks Nancy again!

 

Totally agree with your point on editing Osgood, crazy.  Only one other forum I've seen that; . crazy... but 95% of forum offer delete edtit etc,....

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

'Owing to abuses, editing posts is no longer possible except by ACPs, MVPs and Adobe staff'.

 

Can you expand on what abuses?????

 

Its a bit of a pathetic excuse really. We are dealing with code and posting code, don't the people at Adobe know that? Code needs to be 100% correct for it to work. If one makes a typo as one certainly does all the time then that code will not work and wiil be useless to the peroson who has come here for help.

 

I actually cant quite believe what I'm hearing, its abosultely pathetic, really, really pathetic. Who the hell is making decsions at Adobe, sorry but I must believe they are a bunch of first class idiots, issuing instructions before thinking.

 

Seems to me they are driving away any chance that this forum will ever again be blessed with the quality of contributor that once existed here. Now its full of school kids and part-timers, but hey I guess that is exactly where Dreamwevaer is postioned in the market place.  reap what you sow. Its hilarious.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

Oppps I've made a few typos in the post above...........maybe a moderator or Adobe staff member would like to correct them since the edit option is no longer available.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

thanks OS, what   two dots in front of folder mean?  Does not seem to work for CSS but works great old styel html.  but maybe i'm wrong.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

Hi larry,

The two dots infront of the 'images-headshots' folder really has nothing to do with the css. You should still be able to use whatever method you used in the passed to drag or point to a folder containing the images to get them into Dreamweaver with the correct path, so something else must be happening.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

Hi larrry

 

See the 2 links below. The one which does not work has 'headshots' in the url??

 

Works:

url removed at request of OP

 

Does not work:

url removed at request of OP

 

Is there a folder in the 'headshots' folder named 'images-headshots' - probably not as that just gives a 404 not found page so why is 'headshots' in the link???

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Oct 07, 2020 Oct 07, 2020

Copy link to clipboard

Copied

Darn Osgood, I did not want my name in this thread,  that what been tyring to edit / delete darn!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines