The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
Reply to this topicStart new topic
> Help with responsive code for table
coothead
post Feb 10 2023, 01:55 PM
Post #21


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(PuertoN @ Feb 10 2023, 06:45 PM) *


. I've also got some images that don't fit these two aspect ratios.
. Do you see a way to add something to the code to display these
. individual dimensions correctly without destroying the other images?



Give me the images that you wish to add.

I will think about your other problem.

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 11 2023, 10:00 AM
Post #22


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784



QUOTE(coothead @ Feb 10 2023, 01:55 PM) *

QUOTE(PuertoN @ Feb 10 2023, 06:45 PM) *


. I've also got some images that don't fit these two aspect ratios.
. Do you see a way to add something to the code to display these
. individual dimensions correctly without destroying the other images?



Give me the images that you wish to add.

I will think about your other problem.

coothead

Thanks! These other images vary all pretty much in their dimensions (width). Is there maybe a way to do this with different classes? Like the current landscape class but without effecting the other images? Just a thought...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 11 2023, 12:17 PM
Post #23


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



Hi there PuertoN,

you're not going out of your way to help me out IPB Image so try this out instead...Hopefully, you will find that it addresses most, if not all, of the problems that
you seem to be experiencing.

And, if you are at all interested, here is a link to the latest actual page...

coothead


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 11 2023, 03:46 PM
Post #24


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



Hi there PuertoN,

sorry, but I forgot to fully check the responsive view
before posting, so please download the zip file again...
coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 12 2023, 09:41 AM
Post #25


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784



QUOTE(coothead @ Feb 11 2023, 03:46 PM) *

Hi there PuertoN,

sorry, but I forgot to fully check the responsive view
before posting, so please download the zip file again...coothead


Thanks a lot mate, will try and report back once again smile.gif
And regarding the images with different dimensions: the intention was to make it less complicated for you, not the opposite. Sorry if this wasn't the case at all!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 12 2023, 10:23 AM
Post #26


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(PuertoN @ Feb 12 2023, 02:41 PM) *

. And regarding the images with different dimensions: the intention
. was to make it less complicated for you, not the opposite.



My intension was to actually make it less complicated for you.
Personally, I had no problem working with various aspect ratios

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 13 2023, 12:36 PM
Post #27


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784



QUOTE(coothead @ Feb 12 2023, 10:23 AM) *

QUOTE(PuertoN @ Feb 12 2023, 02:41 PM) *

. And regarding the images with different dimensions: the intention
. was to make it less complicated for you, not the opposite.



My intension was to actually make it less complicated for you.
Personally, I had no problem working with various aspect ratios

coothead


Aspect ratio worked really well cool.gif
but unfortunately not the caption. mellow.gif

Actually all i want is to move this white 'Text'-text (currently a simple <p>
behind each <img>) from the position beside to a position below the image.
There has to be an easy way, right?

IPB Image

Added a couple of linebreaks.
/moderator


This post has been edited by Christian J: Feb 13 2023, 04:08 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 13 2023, 02:20 PM
Post #28


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(PuertoN @ Feb 13 2023, 05:36 PM) *


All I want is to move this white text to a position below the image.



I need to see your page and the text that is to be used for each image.

I would suggest that the best way to do this would be to put it on your
site in a similar way that you did this one...

http://www.nico-schlegel.de/tunnel-vision/

This would help me too see what you actually want rather than having
to keep making calculated guesses. IPB Image

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 13 2023, 03:12 PM
Post #29


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784



QUOTE(coothead @ Feb 13 2023, 02:20 PM) *

QUOTE(PuertoN @ Feb 13 2023, 05:36 PM) *


All I want is to move this white text to a position below the image.



I need to see your page and the text that is to be used for each image.

I would suggest that the best way to do this would be to put it on your
site in a similar way that you did this one...

http://www.nico-schlegel.de/tunnel-vision/

This would help me too see what you actually want rather than having
to keep making calculated guesses. IPB Image

coothead


No problem at all:

Link to the site

The bottom row is my 'draft' incl. the desired texts.
Thank you once again, really appreciate your help, sir!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 14 2023, 06:32 PM
Post #30


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(PuertoN @ Feb 13 2023, 08:12 PM) *

. All I want is to move this white text to a position below the image.



Check out this page...... it is very simple and not a train wreck like "WordPress". IPB Image

You may download the files here...coothead

This post has been edited by coothead: Feb 14 2023, 06:33 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 15 2023, 09:53 AM
Post #31


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784



QUOTE(coothead @ Feb 14 2023, 06:32 PM) *

QUOTE(PuertoN @ Feb 13 2023, 08:12 PM) *

. All I want is to move this white text to a position below the image.



Check out this page...... it is very simple and not a train wreck like "WordPress". IPB Image

You may download the files here...coothead

Thanks, but unfortunately I don't get this to work. Don't get me wrong but I feel like this whole 'nth-of-type' and setting a left-value is pretty complicated for such an 'easy' task ninja.gif
Actually I was hoping for a way to make the text just 'slip' below each image, maybe something like an additional html-tag...? I've already tried to put each img in a div but this doesn't work / destroys the image gallery
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 15 2023, 11:25 AM
Post #32


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(PuertoN @ Feb 15 2023, 02:53 PM) *

. Thanks, but unfortunately I don't get this to work.
. Don't get me wrong but I feel like this whole 'nth-of-type' and
. setting a left-value is pretty complicated for such an 'easy' task



I have supplied you with code that works perfectly well. IPB Image
So why dont you use it as is? IPB Image

What are you doing to it to mess it up, other than trying to
shove it into WordPress? IPB Image

You think that my code is pretty complicated, well this is
my idea of ugly complicated...

CODE

<body class="page-template page-template-templates page-template-organic-custom-template page-template-templatesorganic-custom-template-php page page-id-250 custom-background wp-custom-logo organic-widgets-custom-template singular horizon-has-logo horizon-desc-active horizon-no-img horizon-header-active horizon-header-video-inactive horizon-singular organic-custom-template horizon-background-image">


But it seems that you totally understand code like that and
are blissfully happy with it

C'est la vie. IPB Image

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 15 2023, 11:44 AM
Post #33


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784



QUOTE(coothead @ Feb 15 2023, 11:25 AM) *

QUOTE(PuertoN @ Feb 15 2023, 02:53 PM) *

. Thanks, but unfortunately I don't get this to work.
. Don't get me wrong but I feel like this whole 'nth-of-type' and
. setting a left-value is pretty complicated for such an 'easy' task



I have supplied you with code that works perfectly well. IPB Image
So why dont you use it as is? IPB Image

What are you doing to it to mess it up, other than trying to
shove it into WordPress? IPB Image

You think that my code is pretty complicated, well this is
my idea of ugly complicated...

CODE

<body class="page-template page-template-templates page-template-organic-custom-template page-template-templatesorganic-custom-template-php page page-id-250 custom-background wp-custom-logo organic-widgets-custom-template singular horizon-has-logo horizon-desc-active horizon-no-img horizon-header-active horizon-header-video-inactive horizon-singular organic-custom-template horizon-background-image">


But it seems that you totally understand code like that and
are blissfully happy with it

C'est la vie. IPB Image

coothead


Didn't mean to critize your excellent work and help, mate!
Just a quick thought if there isn't a more simple way. That's all.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 15 2023, 11:58 AM
Post #34


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(PuertoN @ Feb 15 2023, 04:44 PM) *

. Just a quick thought if there isn't a more simple way. That's all.



Don't have a quick thought, take a more considered approach.

What do you think would be a simpler method than nth-of-type()
to access the children of a parent container?

I am always open to suggestions.

Note

As a matter of mild interest this WordPress CSS that you are using...

http://www.nico-schlegel.de/wp-includes/cs...n.css?ver=6.1.1

...uses nth-of-type() 36 times which is six times more than me. IPB Image

coothead

This post has been edited by coothead: Feb 15 2023, 12:09 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 15 2023, 12:32 PM
Post #35


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



Hi there PuertoN,

You will be pleased to know that I have removed the 15 img:nth-of-type()
from the code as I had a brain fart during the setting out the image alignment. IPB Image

Unhappily for you though, the 15 p:nth-of-type() have to remain.

You will fin the ammended CSS in this a attachment...

Attached File  screen.css ( 4.16k ) Number of downloads: 55


coothead

This post has been edited by coothead: Feb 15 2023, 01:00 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PuertoN
post Feb 17 2023, 01:27 PM
Post #36


Newbie
*

Group: Members
Posts: 17
Joined: 3-February 23
Member No.: 28,784



QUOTE(coothead @ Feb 15 2023, 12:32 PM) *

Hi there PuertoN,

You will be pleased to know that I have removed the 15 img:nth-of-type()
from the code as I had a brain fart during the setting out the image alignment. IPB Image

Unhappily for you though, the 15 p:nth-of-type() have to remain.

You will fin the ammended CSS in this a attachment...

Attached File  screen.css ( 4.16k ) Number of downloads: 55


coothead

Finally managed to make it work, had to do some tiny adjustments here and there, but very happy with the result.
I can't thank you enough for all your help, coothead. This is really more than I could've ever asked for!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V < 1 2
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:56 AM