Issue applying css to image inside div

Apply css to image, or better yet, show smaller thumbnails. Then user clicks on image, or taps to see full sized image.

Of course you'd have to implement showing image in a modal.

Just a thought.

I.e,,

<td><img src="<?php echo DIR . 'upload/imgdogs/' . $quy->dogpic; ?>" alt="" class="imgborder"></a></td>

@JLRDW - I'm trying to apply css to image like this:

.PAGEcard1_item_paragraph{font-size:15px; color:rgba(0,0,0,0.8); font-weight:500; line-height:35px; margin:50px 0px;}
.PAGEcard1_item_paragraph img{width:700px !important; height:auto;}

it's not working

Are you sure the css is loading. Test on a simpler page and verify.

I usually load something like:

<link href="<?php echo asset('assets/css/dog/style.css'); ?>" rel="stylesheet">

In the template file.

Sorry I don't use blade.

@JLRDW - My code is inside a vue component with scoped style set to true so it has to be loading:

Here is my full component:

<template>
<section class="PAGEcard1_maincontainer">
    <h1 class="PAGEcard1_title">{{ page.title }}</h1>
    <div class="PAGEcard1_item_container">
        <div class="PAGEcard1_item_image_big" v-if="page.image" :style="'background-image:url('+page.image+');'"></div>
        <iframe class="PAGEcard1_item_image_big" :src="page.video" v-if="page.video"></iframe>
        <div class="PAGEcard1_item_description_container">
            <div class="PAGEcard1_item_description_text" v-html="page.description"></div>
            <div class="PAGEcard1_item_description_stripe_container">
                <div class="PAGEcard1_item_description_stripe_small"></div>
                <div class="PAGEcard1_item_description_stripe_big"></div>
            </div>
        </div>
        <div class="PAGEcard1_item_paragraph" v-html="page.body"></div>
    </div>
</section>
</template>
<!--SCRIPTS-->
<script>
import axios from 'axios';
export default{
name: 'PAGEcard1',

props: {
    page: {required:true}
},

mounted () {
    console.log(this.$options.name+' component successfully mounted');
},

}
</script>
<!--STYLES-->
<style scoped>
.PAGEcard1_maincontainer{width:100%; min-height:700px;}
.PAGEcard1_title{font-size:27px; color:var(--web_primary_color); font-weight:800; margin:20px 0px;}
.PAGEcard1_item_container{width:100%; height:auto; display:flex; flex-direction:column; margin:25px 0px;}
.PAGEcard1_item_image_big{width:100%; height:400px; display:flex; background-size:cover; background-position:center; box-shadow:3px 3px 3px rgba(0,0,0,0.2);}
.PAGEcard1_item_image_small{width:100%; height:350px; display:flex; background-size:cover; background-position:center; box-shadow:3px 3px 3px rgba(0,0,0,0.2);}
.PAGEcard1_item_image_description{font-size:13px; color:rgba(0,0,0,0.7); width:80%; margin:10px 0px; line-height:16px;}
.PAGEcard1_item_description_container{width:95%; height:auto; align-self:center; margin:20px 0px; padding:20px; display:flex; align-items:center; background-color:rgba(0,0,0,0.1); position:relative;}
.PAGEcard1_item_description_text{color:rgba(0,0,0,0.8); font-size:14px;}
.PAGEcard1_item_description_stripe_container{width:10px; height:100%; display:flex; position:absolute; top:0px; left:-10px;}
.PAGEcard1_item_description_stripe_big{width:75%; height:100%; background-color:var(--web_primary_color);}
.PAGEcard1_item_description_stripe_small{width:25%; height:100%; background-color:none;}
.PAGEcard1_item_paragraph{font-size:15px; color:rgba(0,0,0,0.8); font-weight:500; line-height:35px; margin:50px 0px;}
.PAGEcard1_item_paragraph img{width:700px !important; height:auto;}
</style>

Actually, it's working now!! I added the line I used above but with width:100% to my css file instead of the component itself, why is it working?

inspect the image in your bowser tools. Check what css is being applied.

any of your styles being applied?

Styles have to come before the item being styled

@SNAPEY - I just did that, it's getting styles from costadog.css. It's because I added the line to that file,, but why it's not working when I apply that rule inside my vue component?