Adjust Image Size in Mobile Site

maxgates Well-Known Member

Messages:: 213

Likes Received:: 4

Best Answers:: 0

Trophy Points:: 108

#1

I am facing trouble in adjusting image size in mobile website. Unfortunately the image stretches the width of the screen. This issue comes up on blog on my website. The blog software generates this code for images with declaration of the width/height which unfortunately I can not change. Therefore I am looking to overwrite them with CSS file.
<div class="leftbox">
<img src=".mysite.net/blog/media/Photo/Indian_tourists.jpg" width="400" height="267" alt="Indian tourists" title="Indian tourists" />
Code (markup):
I tried using the following code to overwrite image size to fit the screen however it is not working. I use this css code to overwrite floating image for the leftbox.
@media screen and (max-device-width: 640px) {
.imgLeft {
    float:none;
    margin:0;
}

}
Code (markup):
This is the code to fit the image size in the screen.
 .leftbox img {
   height: auto !important;
   max-width: 100% !important;

}

.content img {
    width: auto!important;
     height: auto!important;
     max-width: 100%!important;
     max-height: 100%!important;

}
Code (markup):
For some reason, none of these codes are working on my website -http://www.easydestination.net/blog/. See a blog through a mobile browser to understand. How can I prevent the image from stretching the screen.

maxgates, Jun 15, 2015 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#2

I'm not seeing any images on any of your pages for that code to apply to. NOWHERE is there anything with a class="leftbox" or class="content" on it for those rules to be applied.

... and really if you have to use !important you are probably doing something horribly and terrifyingly wrong... like sending WAP XHTML 1.2 to all devices (a format never officially approved for deployment) mixed with HTML 5 and CSS3 concepts, having a XML prologue for nothing, lack of semi-fluid and elastic design, using tables for layout, double breaks doing paragraph's job, paragraphs around non-paragraph content, lack of logical document structure, lack of media targets, breaking zoom on mobile with a faulty viewport meta...

The inability of the tables to reformat themselves ALONE could be a contributor to your problems. If you're going to design responsive, tables isn't it.

Don't know what "Fone 1.0" is, but it reeks of having been created by someone who didn't know enough about HTML, CSS, or responsive design to be building a template for others to use in the first place!

Though that's most always the case when the word "template" is used. It's filled with gibberish markup, outdated attributes, and broken methodologies which is why I'd suggest pitching that entire codebase in the trash and starting over fresh with ACTUAL semantic markup. There is little on the codebase side I'd even try to salvage from that outdated, outmoded buggy mess.

JUST to give you an idea what I mean, let's take one of your articles:
http://www.easydestination.net/blog/item/bollywood-actor-ajay-devgn-to-promote-bulgaria-tourism

If I were writing that page, this would likely be the markup for it:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">

<meta
	name="viewport"
	content="width=device-width, height=device-height, initial-scale=1.0"
>

<meta
	name="keywords"
	content="Destination,Blog,Bollywood,Actor,Ajay Devgn,Bulgaria,Tourism"
>

<meta
	name="description"
	content="Bollywood superstar Ajay Devgn will be soon seen in a promotional video for Bulgaria tourism. The actor has agreed to promote Bulgaria tourism in India..."
>

<link
	rel="stylesheet"
	type="text/css"
	href="screen.css"
	media="screen,projection,tv"
>

<title>
	Bollywood Actor Ajay Devgn to Promote Bulgaria Tourism -
	Easy Destination Blog
</title>

</head><body>

<h1><a href="/blog">Easy Destination Blog</a></h1>

<ul id="mainMenu">
	<li><a href="/">Home</a></li>
	<li><a href="/travel-to-india-guide.html">India</a></li>
	<li><a href="/world.html">World</a></li>
	<li><a href="/videos" >Videos</a></li>
	<li><a href="/blog/" class="current">Blog</a></li>
</ul>

<div id="content">

	<h2>Bollywood Actor Ajay Devgn to Promote Bulgaria Tourism</h2>

	<div class="info">
		By: <a href="/blog/member/priya">Priya Aggarwal</a> &bull;
		Category: <a href="/blog/category/travel-news">Travel News</a> &bull;
		Date: 15/06 &bull;
		Viewed 81
	</div>

	<p>
		Bollywood superstar Ajay Devgn will be soon seen in a promotional video for Bulgaria tourism. The actor has agreed to promote Bulgaria tourism in India through various local activities which will include a promotional video.
	</p>
	<img
		src="/blog/media/Photo/Ajay_Devgn.jpg"
		alt="Ajay Devgn"
		class="leadingPlate"
	>
	<p>
		Ajay Devgn was recently in Bulgaria to shoot for his upcoming movie Shivaay. He said that the Bulgarian Tourism Ministry has been very supportive of the entire crew of his film.
	</p><p>
		Ajay Devgn also said that he will be lending help to Bulgaria tourism to promote itself in India. Ajay Devgn has not only acted but also directed the movie Shivaay. In a statement he went on to praise the natural beauty of Bulgaria.
	</p><p>
		There aren't many Bollywood movies that are shot in Bulgaria. This is a perfect opportunity for Bulgaria to promote itself in Indian market. With decline in arrivals from Russia due to weak economy and depreciation of ruble, Bulgaria is looking at new markets to explore itself.
	</p><p>
		India is a huge market with the potential to offset losses that have been occurred due to decline in Russian tourists to Bulgaria. There is no better time for Bulgaria to promote itself in India.
	</p><p>
		Soon Ajay Devgn starrer Shivaay will hit Indian cinemas. But this is not the only film that will be shot in Bulgaria. Another major Bollywood movie starring Shahrukh Khan and Kajol Devgn is currently being shot in Bulgaria.
	</p><p>
		The success of these movies could potentially boom Indian tourism to Bulgaria. Few years ago Spain tasted similar success with the release of Bollywood movie called Zindagi Naa Milegi Dobara. The movie was largely filmed in Spain and it helped in attracting tourists from India.
	</p><p>
		Bollywood movies have traditionally influenced Indian tourists. Two decade ago Dilwale Dulhaniya Le Jaayenge helped Switzerland in establishing India as one of the key markets. In recent years, Ek Tha Tiger helped Ireland in wooing Indian tourists.
	</p><p>
		Bulgaria has understood that it would have to do more than just relying on the movies to promote itself. Therefore it has asked for the help of Ajay Devgn to promote Bulgaria tourism in India.
	</p>

</div>

<div id="footer">
	<hr>
	Original Content &copy; Easy Destination
	<ul>
		<li><a href="http://www.easydestination.net">Site Home</a></li>
		<li><a href="/world.html">World Travel</a></li>
		<li><a href="/travel-to-india-guide.html">India Travel</a></li>
		<li><a href="http://www.hotels.easydestination.net">Book Hotels</a></li>
		<li><a href="/blog/">Travel Blog</a></li>
		<li><a href="/trip_planner/">Trip Planner</a></li>
		<li><a href="/videos/">Travel Videos</a></li>
	</ul>
</div>

</body></html>
Code (markup):
With EVERYTHING else being done there in the CSS. If I have time later I might toss together a quick working CSS example of that and a breakdown of the code involved to show you the how/what/why of that.

Pretty much the 1990's style tables for layout, and lack of proper 'targets' for the CSS you presented are combining to bite you in the backside. This is entirely typical of trying to work with most 'off the shelf' templates which is why on the whole I consider them a giant scam.

deathshadow, Jun 15, 2015 IP

maxgates Well-Known Member

Messages:: 213

Likes Received:: 4

Best Answers:: 0

Trophy Points:: 108

#3

deathshadow said: ↑
I'm not seeing any images on any of your pages for that code to apply to. NOWHERE is there anything with a class="leftbox" or class="content" on it for those rules to be applied.

... and really if you have to use !important you are probably doing something horribly and terrifyingly wrong... like sending WAP XHTML 1.2 to all devices (a format never officially approved for deployment) mixed with HTML 5 and CSS3 concepts, having a XML prologue for nothing, lack of semi-fluid and elastic design, using tables for layout, double breaks doing paragraph's job, paragraphs around non-paragraph content, lack of logical document structure, lack of media targets, breaking zoom on mobile with a faulty viewport meta...

The inability of the tables to reformat themselves ALONE could be a contributor to your problems. If you're going to design responsive, tables isn't it.

Don't know what "Fone 1.0" is, but it reeks of having been created by someone who didn't know enough about HTML, CSS, or responsive design to be building a template for others to use in the first place!

Though that's most always the case when the word "template" is used. It's filled with gibberish markup, outdated attributes, and broken methodologies which is why I'd suggest pitching that entire codebase in the trash and starting over fresh with ACTUAL semantic markup. There is little on the codebase side I'd even try to salvage from that outdated, outmoded buggy mess.

JUST to give you an idea what I mean, let's take one of your articles:
http://www.easydestination.net/blog/item/bollywood-actor-ajay-devgn-to-promote-bulgaria-tourism

If I were writing that page, this would likely be the markup for it:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">

<meta
    name="viewport"
    content="width=device-width, height=device-height, initial-scale=1.0"
>

<meta
    name="keywords"
    content="Destination,Blog,Bollywood,Actor,Ajay Devgn,Bulgaria,Tourism"
>

<meta
    name="description"
    content="Bollywood superstar Ajay Devgn will be soon seen in a promotional video for Bulgaria tourism. The actor has agreed to promote Bulgaria tourism in India..."
>

<link
    rel="stylesheet"
    type="text/css"
    href="screen.css"
    media="screen,projection,tv"
>

<title>
    Bollywood Actor Ajay Devgn to Promote Bulgaria Tourism -
    Easy Destination Blog
</title>

</head><body>

<h1><a href="/blog">Easy Destination Blog</a></h1>

<ul id="mainMenu">
    <li><a href="/">Home</a></li>
    <li><a href="/travel-to-india-guide.html">India</a></li>
    <li><a href="/world.html">World</a></li>
    <li><a href="/videos" >Videos</a></li>
    <li><a href="/blog/" class="current">Blog</a></li>
</ul>

<div id="content">

    <h2>Bollywood Actor Ajay Devgn to Promote Bulgaria Tourism</h2>

    <div class="info">
        By: <a href="/blog/member/priya">Priya Aggarwal</a> &bull;
        Category: <a href="/blog/category/travel-news">Travel News</a> &bull;
        Date: 15/06 &bull;
        Viewed 81
    </div>

    <p>
        Bollywood superstar Ajay Devgn will be soon seen in a promotional video for Bulgaria tourism. The actor has agreed to promote Bulgaria tourism in India through various local activities which will include a promotional video.
    </p>
    <img
        src="/blog/media/Photo/Ajay_Devgn.jpg"
        alt="Ajay Devgn"
        class="leadingPlate"
    >
    <p>
        Ajay Devgn was recently in Bulgaria to shoot for his upcoming movie Shivaay. He said that the Bulgarian Tourism Ministry has been very supportive of the entire crew of his film.
    </p><p>
        Ajay Devgn also said that he will be lending help to Bulgaria tourism to promote itself in India. Ajay Devgn has not only acted but also directed the movie Shivaay. In a statement he went on to praise the natural beauty of Bulgaria.
    </p><p>
        There aren't many Bollywood movies that are shot in Bulgaria. This is a perfect opportunity for Bulgaria to promote itself in Indian market. With decline in arrivals from Russia due to weak economy and depreciation of ruble, Bulgaria is looking at new markets to explore itself.
    </p><p>
        India is a huge market with the potential to offset losses that have been occurred due to decline in Russian tourists to Bulgaria. There is no better time for Bulgaria to promote itself in India.
    </p><p>
        Soon Ajay Devgn starrer Shivaay will hit Indian cinemas. But this is not the only film that will be shot in Bulgaria. Another major Bollywood movie starring Shahrukh Khan and Kajol Devgn is currently being shot in Bulgaria.
    </p><p>
        The success of these movies could potentially boom Indian tourism to Bulgaria. Few years ago Spain tasted similar success with the release of Bollywood movie called Zindagi Naa Milegi Dobara. The movie was largely filmed in Spain and it helped in attracting tourists from India.
    </p><p>
        Bollywood movies have traditionally influenced Indian tourists. Two decade ago Dilwale Dulhaniya Le Jaayenge helped Switzerland in establishing India as one of the key markets. In recent years, Ek Tha Tiger helped Ireland in wooing Indian tourists.
    </p><p>
        Bulgaria has understood that it would have to do more than just relying on the movies to promote itself. Therefore it has asked for the help of Ajay Devgn to promote Bulgaria tourism in India.
    </p>

</div>

<div id="footer">
    <hr>
    Original Content &copy; Easy Destination
    <ul>
        <li><a href="http://www.easydestination.net">Site Home</a></li>
        <li><a href="/world.html">World Travel</a></li>
        <li><a href="/travel-to-india-guide.html">India Travel</a></li>
        <li><a href="http://www.hotels.easydestination.net">Book Hotels</a></li>
        <li><a href="/blog/">Travel Blog</a></li>
        <li><a href="/trip_planner/">Trip Planner</a></li>
        <li><a href="/videos/">Travel Videos</a></li>
    </ul>
</div>

</body></html>
Code (markup):
With EVERYTHING else being done there in the CSS. If I have time later I might toss together a quick working CSS example of that and a breakdown of the code involved to show you the how/what/why of that.

Pretty much the 1990's style tables for layout, and lack of proper 'targets' for the CSS you presented are combining to bite you in the backside. This is entirely typical of trying to work with most 'off the shelf' templates which is why on the whole I consider them a giant scam.
Click to expand...
Thanks for taking time out to explain things in details. Unfortunately I am not a coder and this template was designed by the team behind the CMS Blog software (Nucleus CMS) that I use. This is the only mobile skin provided for the blog therefore despite all the flaws it has, I am unfortunately stuck on using it. Anyway, thanks for the help.

maxgates, Jun 15, 2015 IP

kk5st Prominent Member

Messages:: 3,497

Likes Received:: 376

Best Answers:: 29

Trophy Points:: 335

#4

maxgates said: ↑

The blog software generates this code for images with declaration of the width/height which unfortunately I can not change.
Click to expand...

Then why are you using it? Whose site is it? Yours or theirs?

maxgates said: ↑

Unfortunately I am not a coder and this template was designed by the team behind the CMS Blog software (Nucleus CMS) that I use.
Click to expand...

Have you contacted them for a solution? That should your first step.

cheers,

gary

kk5st, Jun 15, 2015 IP

deathshadow likes this.

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#5

kk5st said: ↑

Then why are you using it? Whose site is it? Yours or theirs?
Click to expand...

Lame excuse #5

Just because your CMS software outputs rubbish by default, is no excuse to LET it do so.

Of course if that garbage is hardcoded, I'd throw the ENTIRE existing site in the trash and start over. It would be easier to do it from scratch than to try and make what you have there already work. That it seems to think that there should even be separate markup for desktop and mobile shows a level of developer ignorant and ineptitude that, well...

Just reenforces my opinion that off the shelf solutions -- be it a CMS, CSS framework, JS framework, or any other sleazy shortcut -- are universally rubbish used to delude people into THINKING they can have a website typically hocked by scam artists and coded by people simply unqualified to be writing PHP, SQL, HTML or CSS in the first place.

But it seems like EVERYONE wants to take the sleazy shortcut now and glide by on as little effort as possible without learning ANYTHING useful, then they wonder why they end up folding inside a year or worse, end up with a giant money pit.

deathshadow, Jun 15, 2015 IP

Log in or Sign up

Advertising (learn more)

Adjust Image Size in Mobile Site

maxgates Well-Known Member

deathshadow Acclaimed Member

maxgates Well-Known Member

kk5st Prominent Member

deathshadow Acclaimed Member

Log in or Sign up

Advertising (learn more)

Adjust Image Size in Mobile Site

maxgates Well-Known Member

deathshadow Acclaimed Member

maxgates Well-Known Member

kk5st Prominent Member

deathshadow Acclaimed Member

Useful Searches